我有 3 个字段： 总金额 经常性金额 出现次数
用户将始终输入出现次数，但可以选择输入总金额或重复金额。
这个方程很简单： 发生次数 * 经常性金额 = 总金额
我需要帮助制作一个 Javascript 函数，如果用户开始在总金额字段中输入该函数，循环金额将被禁用。如果他们先输入经常性金额，情况也是如此。一旦用户输入了出现次数和任一金额，则应计算剩余金额并替换禁用的字段。
我需要该功能能够允许用户更改任何数字，并重新进行计算。此外，如果用户从金额中完全删除了一个值，则另一个金额字段应该再次变为活动状态。
我以前从未编写过 Javascript 代码，只是编辑过。感谢任何帮助我指出正确方向的帮助。谢谢
【问题讨论】：
标签： javascript forms
不确定为什么您认为禁用字段是个好主意。我认为从用户体验的角度来看，允许他们随时编辑任何字段并根据需要调整其他字段会更好。
<input id="recurring" onchange="onRecurEdit()"> *
<input id="occurences" onchange="onOccurEdit()"> =
<input id="total" onchange="onTotalEdit()">
<script>
var recur = document.getElementById('recurring');
var total = document.getElementById('total');
var occur = document.getElementById('occurences');
function onTotalEdit() {
recurring.value = total.value / occur.value;
}
function onRecurEdit() {
total.value = occur.value * recur. value;
}
function onOccurEdit() {
total.value = occur.value * recur. value;
}
</script>
【讨论】：
以下是您可能正在寻找的部分内容：代码使用 JQuery
JS代码：
$(document).ready(function() {
function roundNumber(num, dec) {
var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
return result;
}
function calculateTot(evt) {
var o = Number($("#occur").val());
var a = Number($("#recAmt").val());
if(!isNaN(0) && !isNaN(a)) {
var tot = roundNumber(o * a, 2);
$("#totalAmt").val(tot);
}else {
$("#totalAmt").val("0");
}
}
$("#occur").bind("change", calculateTot);
$("#recAmt").bind("change", calculateTot);
});
相同的HTML：
<input type="text" id="occur" /> *
<input type="text" id="recAmt" /> =
<input type="text" id="totalAmt" readonly="readonly" />
【讨论】：
这并不完美，但应该是一个不错的开始：
您可以在http://jsfiddle.net/qzxf7/查看此代码的交互式演示
你没有给我们你的 HTML，所以我假设你正在使用这样的东西：
<form action="" method="POST">
<input type="text" name="occurences" id="occurences" value="" />
<input type="text" name="recurringAmt" id="recurringAmt" value="" />
<input type="text" name="totalAmt" id="totalAmt" value="" />
</form>
如果你之前没有处理过 Javascript，我会推荐你使用 jQuery，这是在你的 HTML <head> 中导入 jQuery 脚本的问题。
使用 jQuery，您可以从这样的代码开始，这种代码过于复杂，但会让您了解如何处理禁用的内容以及值更新。
/* On page contents loaded */
function updateForm() {
var occ = $('#occurences');
var occV = parseFloat(occ.val());
occV = occV >= 0 ? occV : 0;
var rec = $('#recurringAmt');
var recV = parseFloat(rec.val());
recV = recV >= 0 ? recV : 0;
var tot = $('#totalAmt');
var totV = parseFloat(tot.val());
totV = totV >= 0 ? totV : 0;
/* If total is disabled */
if (tot.attr("disabled")) {
if (rec.val() == '') { /* if no text in rec */
tot.removeAttr("disabled"); /* Reenable total */
tot.val('');
return;
}
/* Otherwise update total */
tot.val(recV * occV);
return;
}
/* If rec is disabled */
if (rec.attr("disabled")) {
if (tot.val() == '') { /* if no text in total */
rec.removeAttr("disabled"); /* Reenable rec */
rec.val('');
return;
}
/* Otherwise update rec watching for divide by zero error */
rec.val(occV > 0 ? totV / occV : 0);
return;
}
/* Otherwise neither disabled */
if (recV > 0) { /* if rec has a number value */
tot.attr("disabled", true); /* disable total */
tot.val(recV * occV); /* update total */
return;
}
if (totV > 0) { /* if total has a number value */
rec.attr("disabled", true); /* disable rec */
/* Update rec watching for divide by zero error */
rec.val(occV > 0 ? totV / occV : 0);
return;
}
}
$(document).ready(function() {
$('#occurences').keyup(function(){
updateForm();
});
$('#totalAmt').keyup(function(){
updateForm();
});
$('#recurringAmt').keyup(function(){
updateForm();
});
});
【讨论】：