- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这让我抓狂 - 我知道需要发生什么,我认为脚本可以工作,但我看不出哪里出了问题。
我有一个表单,可以根据不同的输入计算产品组合。
首先,有人可以单击具有固定金额的单选按钮,表格会根据产品销售团队确定的固定百分比计算出金额。在这种情况下,单击单选按钮将重置表单并删除之前在“其他”字段中输入的所有金额。
其次,如果固定金额不够,您可以输入金额并使用相同的百分比混合。这是“其他”字段,它会清除单选按钮和字段中的金额。
最后,导致问题的部分,如果不需要任何固定选项,您可以在字段中输入所需的金额,表格将保留总计并更改百分比以适应。每当焦点置于任一文本字段上时,这也会清除“自定义”字段中的单选按钮和金额。
但是,当我从一个字段移动到另一个字段以输入金额时,每次我关注下一个字段时,表单都会不断地自行重置。我尝试添加一个条件,以便如果未选择单选按钮且自定义字段不为空,则字段将被清除。目的是在后续字段中,条件发生变化,以便自定义字段为空并且表单停止清除字段。
但是,它不是这样工作的 - 每个接收焦点的字段都会清除字段,而我没有运气弄清楚如何修复它。
提前抱歉,如果这很长 - 我确信 jquery 可以被清理,但这就是我现在所拥有的。
提前非常感谢您提供的任何帮助。
拨弄:https://jsfiddle.net/saabStory/cbtL0gm6/1/
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
* {font-family: Arial, Verdana, Helvetica, sans-serif}
.ckCustomTable {border:none;border-collapse:collapse;background-color:#fff;font-size:10pt;width:800px;}
.ckCustomTable tr th, .ckCustomTable tr td{padding:4px 2px;border:1px solid #ddd;border-collapse:collapse;background-color:#fff !important;text-align:center;}
.ckCustomTable tr th:nth-child(1),.ckCustomTable tr td:nth-child(1) {width:60px !important;}
.ckCustomTable tr th:nth-child(2),.ckCustomTable tr td:nth-child(2) {width:75px !important;}
.ckCustomTable tr th:nth-child(3),.ckCustomTable tr td:nth-child(3) {width:75px !important;}
.ckCustomTable tr th:nth-child(4),.ckCustomTable tr td:nth-child(4) {width:75px;}
.ckCustomTable tr th:nth-child(5),.ckCustomTable tr td:nth-child(5) {width:75px;}
.ckCustomTable tr th:nth-child(6),.ckCustomTable tr td:nth-child(6) {width:75px;}
.ckCustomTable tr th:nth-child(7),.ckCustomTable tr td:nth-child(7) {width:60px;}
.ckCustomTable tr th:nth-child(8),.ckCustomTable tr td:nth-child(8) {width:90px;}
.ckCustomTable tr th:nth-child(9),.ckCustomTable tr td:nth-child(9){}
.ckCustomTable tr th:nth-child(10),.ckCustomTable tr td:nth-child(10){background-color:#0f0 !important;}
.ckCustomTable tr td #tmCustom,
.ckCustomTable tr td #smCustom,
.ckCustomTable tr td #tgCustom,
.ckCustomTable tr td #trCustom,
.ckCustomTable tr td #ddCustom,
.ckCustomTable tr td #lmCustom,
.ckCustomTable tr td #ttCustom,
.ckCustomTable tr td #soCustom {text-align:center;border:1px solid #0ff;font-size:9pt;color:#666;width:35px;}
.ckCustomTable tr td #mxCustomTotal {text-align:center;padding:2px 1px;border:1px solid #ddd;font-size:9pt;color:#666;width:35px;}
.ckSelectGrid {border:none;border-collapse:collapse;width:800px;margin-bottom:10px;}
.ckSelectGrid tr td:nth-child(1),.ckSelectGrid tr td:nth-child(3),.ckSelectGrid tr td:nth-child(5),.ckSelectGrid tr td:nth-child(7),.ckSelectGrid tr td:nth-child(9) {width:50px;padding:0;text-align:right !important;border:none;border-collapse:collapse;}
.ckSelectGrid tr td:nth-child(2),.ckSelectGrid tr td:nth-child(4),.ckSelectGrid tr td:nth-child(6),.ckSelectGrid tr td:nth-child(8),.ckSelectGrid tr td:nth-child(10) {width:100px;text-align:left;border:none;border-collapse:collapse;padding-left:0;}
.ckSelectGrid tr td:nth-child(9) {width:80px !important;}
.ckSelectGrid tr td:nth-child(10) {width:90px !important;padding:0;margin:0;}
</style>
</head>
<body>
<table class="ckSelectGrid" id="selectAmt">
<tr>
<td><input type="radio" name="cookieSelect" id="count100" class="" value="100"></td>
<td class="paddingLeft10"><label class="font105" for="count100">100</label></td>
<td><input type="radio" name="cookieSelect" id="count250" class="" value="250"></td>
<td><label class="font105" for="count250">250</label></td>
<td><input type="radio" name="cookieSelect" id="count300" class="" value="300"></td>
<td><label class="font105" for="count300">300</label></td>
<td><input type="radio" name="cookieSelect" id="count600" class="" value="600"></td>
<td><label class="font105" for="count600">600</label></td>
<td><label class="font105 paddingRight10" for="cookieGoal">Other</label></td>
<td><input type="text" id="countOther" name="countOther" class="form_Field60 key-numeric" style="font-size:9pt !important;" tabindex="1" autocomplete="nope" /></td>
</tr>
</table>
<table class="ckCustomTable">
<tr>
<th>ITEM</th>
<th>TM</th>
<th>SM</th>
<th>TG</th>
<th>TR</th>
<th>DD</th>
<th>LM</th>
<th>TT</th>
<th>SO</th>
<th>Total</th>
</tr>
<tr>
<td>Mix %</td>
<td id="tmPercent">27%</td>
<td id="smPercent">23%</td>
<td id="tgPercent">15%</td>
<td id="trPercent">9%</td>
<td id="ddPercent">8%</td>
<td id="lmPercent">9%</td>
<td id="ttPercent">2%</td>
<td id="soPercent">7%</td>
<td id="mxPercent">100%</td>
</tr>
<tr>
<td >AMT:</td>
<td><input type="text" style="width:50px;padding:5px 0;border:1px solid #ccc;" class="key-numeric textCenter" name="tmTotal" id="tmTotal" tabindex="10" value=""></td>
<td><input type="text" style="width:50px;padding:5px 0;border:1px solid #ccc;" class="key-numeric textCenter" name="smTotal" id="smTotal" tabindex="11" value=""></td>
<td><input type="text" style="width:50px;padding:5px 0;border:1px solid #ccc;" class="key-numeric textCenter" name="tgTotal" id="tgTotal" tabindex="12" value=""></td>
<td><input type="text" style="width:50px;padding:5px 0;border:1px solid #ccc;" class="key-numeric textCenter" name="trTotal" id="trTotal" tabindex="13" value=""></td>
<td><input type="text" style="width:50px;padding:5px 0;border:1px solid #ccc;" class="key-numeric textCenter" name="ddTotal" id="ddTotal" tabindex="14" value=""></td>
<td><input type="text" style="width:50px;padding:5px 0;border:1px solid #ccc;" class="key-numeric textCenter" name="lmTotal" id="lmTotal" tabindex="15" value=""></td>
<td><input type="text" style="width:50px;padding:5px 0;border:1px solid #ccc;" class="key-numeric textCenter" name="ttTotal" id="ttTotal" tabindex="16" value=""></td>
<td><input type="text" style="width:50px;padding:5px 0;border:1px solid #ccc;" class="key-numeric textCenter" name="soTotal" id="soTotal" tabindex="17" value=""></td>
<td><input type="text" style="width:50px;padding:5px 0;border:1px solid #ccc;" class="key-numeric textCenter" name="mxTotal" id="mxTotal" readonly tabindex="-1" value=""></td>
</tr>
</table>
<input type="text" name="countOtherTemp" id="countOtherTemp" placeholder="Count Other Temp" tabindex="-1" value="">
<input type="text" name="tmTotalTemp" id="tmTotalTemp" placeholder="TMTemp" tabindex="-1" value="">
<input type="text" name="smTotalTemp" id="smTotalTemp" placeholder="SMTemp" tabindex="-1" value="">
<input type="text" name="tgTotalTemp" id="tgTotalTemp" placeholder="TGTemp" tabindex="-1" value="">
<input type="text" name="trTotalTemp" id="trTotalTemp" placeholder="TRTemp" tabindex="-1" value="">
<input type="text" name="ddTotalTemp" id="ddTotalTemp" placeholder="DDTemp" tabindex="-1" value="">
<input type="text" name="lmTotalTemp" id="lmTotalTemp" placeholder="LMTemp" tabindex="-1" value="">
<input type="text" name="ttTotalTemp" id="ttTotalTemp" placeholder="TTTemp" tabindex="-1" value="">
<input type="text" name="soTotalTemp" id="soTotalTemp" placeholder="SOTemp" tabindex="-1" value="">
<input type="text" name="mxTotalTemp" id="mxTotalTemp" placeholder="MXTemp" tabindex="-1" value="">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" ></script> <!-- V 1.11.2 -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- V 1.11.2 -->
<script type="application/javascript">
$('.key-numeric').keypress(function(e) {
var verified = (e.which == 8 || e.which == undefined || e.which == 0) ? null : String.fromCharCode(e.which).match(/[^0-9]/);
if (verified) {e.preventDefault();}
});
$(document).ready(function () {
//= CUSTOM MIX CALCULATIONS ====================================================================================================================================
// INITIALIZE STANDARD COOKIE MIX VARS =====================================================================================================================
var tmTotalTemp = null;
var smTotalTemp = null;
var tgTotalTemp = null;
var trTotalTemp = null;
var ddTotalTemp = null;
var lmTotalTemp = null;
var ttTotalTemp = null;
var soTotalTemp = null;
var mxTotalTemp = null;
var countOtherTemp = null;
//= RADIO BUTTON SELECTION =================================================================================================================================
$("#selectAmt :radio").change(function() {
$("#countOther,#countOtherTemp").val('');
$("#tmPercent").html("27%");
$("#smPercent").html("23%");
$("#tgPercent").html("15%");
$("#trPercent").html("9%");
$("#ddPercent").html("8%");
$("#lmPercent").html("9%");
$("#ttPercent").html("2%");
$("#soPercent").html("7%");
$("#mxPercent").html("100%");
tmTotalTemp = parseInt(Math.round(this.value)*.27);
smTotalTemp = parseInt(Math.round(this.value)*.23);
tgTotalTemp = parseInt(Math.round(this.value)*.15);
trTotalTemp = parseInt(Math.round(this.value)*.09);
ddTotalTemp = parseInt(Math.round(this.value)*.08);
lmTotalTemp = parseInt(Math.round(this.value)*.09);
ttTotalTemp = parseInt(Math.round(this.value)*.02);
soTotalTemp = parseInt(Math.round(this.value)*.07);
mxTotalTemp = Math.round(tmTotalTemp + smTotalTemp + tgTotalTemp + trTotalTemp + ddTotalTemp + lmTotalTemp + ttTotalTemp + soTotalTemp);
$("#tmTotal").val(tmTotalTemp);
$("#smTotal").val(smTotalTemp);
$("#tgTotal").val(tgTotalTemp);
$("#trTotal").val(trTotalTemp);
$("#ddTotal").val(ddTotalTemp);
$("#lmTotal").val(lmTotalTemp);
$("#ttTotal").val(ttTotalTemp);
$("#soTotal").val(soTotalTemp);
$("#mxTotal").val(mxTotalTemp);
$("#countOther").val(countOtherTemp);
$("#tmTotalTemp").val(tmTotalTemp);
$("#smTotalTemp").val(smTotalTemp);
$("#tgTotalTemp").val(tgTotalTemp);
$("#trTotalTemp").val(trTotalTemp);
$("#ddTotalTemp").val(ddTotalTemp);
$("#lmTotalTemp").val(lmTotalTemp);
$("#ttTotalTemp").val(ttTotalTemp);
$("#soTotalTemp").val(soTotalTemp);
$("#mxTotalTemp").val(mxTotalTemp);
});
//= OTHER AMOUNT CALCULATION ===============================================================================================================================
$('#countOther').on("input",function(){
$("#countOtherTemp").val($('#countOther').val());
$("#tmPercent").html("27%");
$("#smPercent").html("23%");
$("#tgPercent").html("15%");
$("#trPercent").html("9%");
$("#ddPercent").html("8%");
$("#lmPercent").html("9%");
$("#ttPercent").html("2%");
$("#soPercent").html("7%");
$("#mxPercent").html("100%");
$("#count100,#count250,#count300,#count600").attr('checked', false);
$("#tmTotal,#smTotal,#tgTotal,#trTotal,#ddTotal,#lmTotal,#ttTotal,#soTotal,#mxTotal").val('');
$("#tmTotalTemp,#smTotalTemp,#tgTotalTemp,#trTotalTemp,#ddTotalTemp,#lmTotalTemp,#ttTotalTemp,#soTotalTemp,#mxTotalTemp").val('');
$("#tmTotal,#tmTotalTemp").val(Math.round($('#countOther').val()*.27));
$("#smTotal,#smTotalTemp").val(Math.round($('#countOther').val()*.23));
$("#tgTotal,#tgTotalTemp").val(Math.round($('#countOther').val()*.15));
$("#trTotal,#trTotalTemp").val(Math.round($('#countOther').val()*.09));
$("#ddTotal,#ddTotalTemp").val(Math.round($('#countOther').val()*.08));
$("#lmTotal,#lmTotalTemp").val(Math.round($('#countOther').val()*.09));
$("#ttTotal,#ttTotalTemp").val(Math.round($('#countOther').val()*.02));
$("#soTotal,#soTotalTemp").val(Math.round($('#countOther').val()*.07));
$("#mxTotal,#mxTotalTemp").val(Number($("#tmTotal").val()) + Number($("#smTotal").val()) + Number($("#tgTotal").val()) + Number($("#trTotal").val()) + Number($("#ddTotal").val()) + Number($("#lmTotal").val()) + Number($("#ttTotal").val()) + Number($("#soTotal").val()) + Number($("#mxTotal").val()));
});
//= CUSTOM COOKIE MIX CALCULATIONS =============================================================================================================================
// INITIALIZE CUSTOM COOKIE MIX VARS =======================================================================================================================
$('#tmTotal,#smTotal,#tgTotal,#trTotal,#ddTotal,#lmTotal,#ttTotal,#soTotal').focus(function() {
$("#amountOther").val('');
var radioCheck = $('input:radio[name=cookieSelect]:checked').val();
if (radioCheck || ($("#amountOther").val() !== '')) {
$("#count100,#count250,#count300,#count600").prop("checked", false);
$("#tmTotal,#smTotal,#tgTotal,#trTotal,#ddTotal,#lmTotal,#ttTotal,#soTotal,#mxTotal,#countOther").val('');
// return false;
}
});
$("#tmTotal").each(function(){ //= CALCULATE SUM FOR PRODUCTS ===================================================
$(this).on("input",function(){
calculateOrderSum();
});
});
$("#smTotal").each(function(){ //= CALCULATE SUM FOR PRODUCTS ===================================================
$(this).on("input",function(){
calculateOrderSum();
});
});
$("#tgTotal").each(function(){ //= CALCULATE SUM FOR PRODUCTS ===================================================
$(this).on("input",function(){
calculateOrderSum();
});
});
$("#trTotal").each(function(){ //= CALCULATE SUM FOR PRODUCTS ===================================================
$(this).on("input",function(){
calculateOrderSum();
});
});
$("#ddTotal").each(function(){ //= CALCULATE SUM FOR PRODUCTS ===================================================
$(this).on("input",function(){
calculateOrderSum();
});
});
$("#lmTotal").each(function(){ //= CALCULATE SUM FOR PRODUCTS ===================================================
$(this).on("input",function(){
calculateOrderSum();
});
});
$("#ttTotal").each(function(){ //= CALCULATE SUM FOR PRODUCTS ===================================================
$(this).on("input",function(){
calculateOrderSum();
});
});
$("#soTotal").each(function(){ //= CALCULATE SUM FOR PRODUCTS ===================================================
$(this).on("input",function(){
calculateOrderSum();
});
});
function calculateOrderSum() {
var tm = Number($('#tmTotal').val());
var sm = Number($('#smTotal').val());
var tg = Number($('#tgTotal').val());
var tr = Number($('#trTotal').val());
var dd = Number($('#ddTotal').val());
var lm = Number($('#lmTotal').val());
var tt = Number($('#ttTotal').val());
var so = Number($('#soTotal').val());
var mx = tm + sm + tg + tr + dd + lm + tt + so
$("#mxTotal").val(mx);
//= POPULATE TEMP FIELDS ===========================================================================================================================================
$("#tmTotalTemp").val(tm);
$("#smTotalTemp").val(sm);
$("#tgTotalTemp").val(tg);
$("#trTotalTemp").val(tr);
$("#ddTotalTemp").val(dd);
$("#lmTotalTemp").val(lm);
$("#ttTotalTemp").val(tt);
$("#soTotalTemp").val(so);
$("#mxTotalTemp").val(mx);
//= CALCULATE PERCENTAGES ==========================================================================================================================================
var tmPercent = Math.round((($("#tmTotal").val()) / ($("#mxTotal").val())) * 100);
var smPercent = Math.round((($("#smTotal").val()) / ($("#mxTotal").val())) * 100);
var tgPercent = Math.round((($("#tgTotal").val()) / ($("#mxTotal").val())) * 100);
var trPercent = Math.round((($("#trTotal").val()) / ($("#mxTotal").val())) * 100);
var ddPercent = Math.round((($("#ddTotal").val()) / ($("#mxTotal").val())) * 100);
var lmPercent = Math.round((($("#lmTotal").val()) / ($("#mxTotal").val())) * 100);
var ttPercent = Math.round((($("#ttTotal").val()) / ($("#mxTotal").val())) * 100);
var soPercent = Math.round((($("#soTotal").val()) / ($("#mxTotal").val())) * 100);
var mxPercent = (tmPercent + smPercent + tgPercent + trPercent + ddPercent + lmPercent + ttPercent + soPercent);
$("#tmPercent").html(tmPercent + "%");
$("#smPercent").html(smPercent + "%");
$("#tgPercent").html(tgPercent + "%");
$("#trPercent").html(trPercent + "%");
$("#ddPercent").html(ddPercent + "%");
$("#lmPercent").html(lmPercent + "%");
$("#ttPercent").html(ttPercent + "%");
$("#soPercent").html(soPercent + "%");
$("#mxPercent").html(mxPercent + "%");
}
});
</script>
</body>
最佳答案
这是一个简单的错误,但看起来可能是这样:
只需将 #amountOther
的每个实例更改为 #countOther
。
具体在这里:
$('#tmTotal,#smTotal,#tgTotal,#trTotal,#ddTotal,#lmTotal,#ttTotal,#soTotal').focus(function() {
$("#amountOther").val('');
var radioCheck = $('input:radio[name=cookieSelect]:checked').val();
if (radioCheck || ($("#amountOther").val() !== '')) {
$("#count100,#count250,#count300,#count600").prop("checked", false);
$("#tmTotal,#smTotal,#tgTotal,#trTotal,#ddTotal,#lmTotal,#ttTotal,#soTotal,#mxTotal,#countOther").val('');
// return false;
}
});
更改为:
$('#tmTotal,#smTotal,#tgTotal,#trTotal,#ddTotal,#lmTotal,#ttTotal,#soTotal').focus(function() {
//**This line below**
$("#countOther").val('');
var radioCheck = $('input:radio[name=cookieSelect]:checked').val();
//**Also the line below here**
if (radioCheck || ($("#countOther").val() !== '')) {
$("#count100,#count250,#count300,#count600").prop("checked", false);
$("#tmTotal,#smTotal,#tgTotal,#trTotal,#ddTotal,#lmTotal,#ttTotal,#soTotal,#mxTotal,#countOther").val('');
// return false;
}
});
关于javascript - 如何清除表单字段一次而不是每次触发焦点事件时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58683018/
我有一个网站,我正在通过学校参加比赛,但我在清除 float 元素方面遇到了问题。 该网站托管在 http://www.serbinprinting.com/corey/development/
我有一个清除按钮,需要使用 JQuery 函数清除该按钮单击时的 TextBox 值(输入的)。 最佳答案 您只需将单击事件附加到按钮即可将输入元素的值设置为空。 $("#clearButton").
我们已经创建了一个保存到 CoreData 然后同步到 CloudKit 的 iOS 应用程序。在测试中,我们还没有找到一种方法来清除应用程序 iCloud 容器中的数据(用于用户私有(private
这是一个普遍的问题,也是我突然想到并且似乎有道理的问题。我看到很多人使用清除div 并且知道这有时不受欢迎,因为它是额外的标记。我最近开始使用 因为它接缝代表了它的实际用途。 当然都引用了:.clea
我有两个单选按钮。如果我检查第一个单选按钮下面的数据将填充在组合框中。之后我将检查另一个单选按钮,我想清除组合框值。 EmployeeTypes _ET = new EmployeeTypes(
我一直在玩 Canvas ,我正在尝试制作一个可以移动和跳跃的正方形,移动部分已经完成,但是跳跃部分有一个问题:每次跳跃时它都会跳得更快 here's a jsfiddle 这是代码: ///////
我该如何在 Dart 上做到这一点? 抓取tbody元素后,我想在其上调用empty(),但这似乎不存在: var el = query('#search_results_tbody'); el.em
我需要创建一个二维模拟,但是在设置新的“框架”时,旧的“框架”不会被清除。 我希望一些圆圈在竞技场中移动,并且每个循环都应删除旧圆圈并生成新圆圈。一切正常,但旧的没有被清除并且仍然可见,这就是我需要改
无论我使用set statusline将状态行更改为什么,我的状态行都不会改变。看起来像 ".vimrc" 39L, 578C
在 WPF 应用程序中,我有一个 ListView 绑定(bind)到我的 ViewModel 上的一个 ObservableCollection。 在应用程序运行期间,我需要删除并重新加载集合中的所
我有一个大型程序,一个带有图形的文本扭曲游戏。在我的代码中的某处,我使用 kbhit() 我执行此代码来清除我的输入缓冲区: while ((c = getchar()) != '\n' && c !
我正在将所有网站的页面加载到主索引页面中,并通过将 href 分成段并在主域名后使用 .hash 函数添加段来更新 URL 显示,如下所示: $('a').click(function(event)
我有一个带有 的表单和 2 控件来保存和重置表单。我正在触发 使用 javascript __doPostBack()函数并在其中传递一个值 __EVENTARGUMENT如果面板应该重置。 我的代
我目前有一堆 UIViewController,每个都是在前一个之上呈现的模式 ViewController。我的问题是我不需要一堆 UIViewController,我只需要最后一个。因此,当出现新
我在一个类中有一些属性方法,我想在某个时候清除这个属性的缓存。 示例: class Test(): def __init__(self): pass @property
在此Test Link我试图将标题和主站点导航安装到博客脚本的顶部。 我清除:两者;在主要网站脚本上工作,但现在把所有东西都扔到了一边。尝试了无数次 fixex 都没有成功!提前感谢 Ant 指点解决
我似乎无法正确清除布局。看this 我无法阻止左栏中的元素向下推右栏中的元素。谁能帮忙? Screenshot with some pointy arrows (死链接) 最佳答案 问题标记/样式似
我希望能够在某个类 (sprite-empos) 之后清除 '' 中的内容,想知道是否有不添加任何新类或不使用 js 的方法(我在下面尝试过不工作)? 为了明确它是“985”,我想在某个视口(view
我想清除ptr_array boost::ptr_array a; ... a.clear(); // missing 如何清理 ptr 容器? 最佳答案 它应该表现得像一个数组,您不能在 C++
这是我使用多 map 制作的一个简单的事件系统;当我使用 CEvents::Add(..) 方法时,它应该插入并进入多重映射。问题是,当我触发这些事件时, multimap 似乎是空的。我确定我没有调
我是一名优秀的程序员,十分优秀!