这让我抓狂 - 我知道需要发生什么，我认为脚本可以工作，但我看不出哪里出了问题。
我有一个表单，可以根据不同的输入计算产品组合。
首先，有人可以单击具有固定金额的单选按钮，表格会根据产品销售团队确定的固定百分比计算出金额。在这种情况下，单击单选按钮将重置表单并删除之前在“其他”字段中输入的所有金额。
其次，如果固定金额不够，您可以输入金额并使用相同的百分比混合。这是“其他”字段，它会清除单选按钮和字段中的金额。
最后，导致问题的部分，如果不需要任何固定选项，您可以在字段中输入所需的金额，表格将保留总计并更改百分比以适应。每当焦点置于任一文本字段上时，这也会清除“自定义”字段中的单选按钮和金额。
但是，当我从一个字段移动到另一个字段以输入金额时，每次我关注下一个字段时，表单都会不断地自行重置。我尝试添加一个条件，以便如果未选择单选按钮且自定义字段不为空，则字段将被清除。目的是在后续字段中，条件发生变化，以便自定义字段为空并且表单停止清除字段。
但是，它不是这样工作的 - 每个接收焦点的字段都会清除字段，而我没有运气弄清楚如何修复它。
提前抱歉，如果这很长 - 我确信 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/