Question

我有3个字段：总金额重复金额出现

用户将始终输入事件，但可以选择输入总金额或重复金额。

这个等式非常简单：出现次数*重复金额=总金额

我需要帮助制作一个Javascript函数，如果用户开始输入总金额字段，则重复金额将被禁用。如果他们首先输入重复金额，情况也是如此。用户输入事件和任何一个金额后，应计算剩余金额并替换已禁用的字段。

我需要该功能才能允许用户更改任何数字，并重新进行计算。此外，如果用户从金额中完全删除了一个值，则另一个金额字段应该再次变为活动状态。

我之前从未编写过Javascript代码，只是编辑过。任何帮助指出我正确的方向是值得赞赏的。感谢

Answer 1

不确定为什么你认为禁用字段是一个好主意。我认为用户体验方面，最好允许他们随时编辑任何字段，根据需要调整其他字段。

<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>

Answer 2

以下是您可能正在寻找的部分内容：代码使用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" />

Answer 3

这不是完美的，但它应该是一个不错的开始：

您可以在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();
  });
});

获取表单字段以隐藏和填充

3 个答案: