基于其他输入值的表单输入实时计算

Posted 2023-05-08

【中文标题】基于其他输入值的表单输入实时计算

【英文标题】：Form input live calculation based on other input valiue

【发布时间】：2019-05-29 01:59:51

【问题描述】：

我正在编写实时货币计算器脚本，目标是根据表单输入进行实时计算。

到目前为止，感谢您的 cmets，我取得了以下成就：

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="usd">
<input type="text" id="gel">
<input type="text" id="eur">

javascript

<script>
$("#gel").keyup(function()
  var val = $(this).val();
  if(isNaN(val))  val =val.replace(/\D/g,''); 
  $('#usd').val(val / <?php echo $usd; ?>);
  $("#gel").val(val);
  $("#eur").val(val / <?php echo $eur; ?>);
);
$("#usd").keyup(function()
  var val = $(this).val();
  if(isNaN(val))  val =val.replace(/\D/g,''); 
  $('#usd').val(val);
  $("#gel").val(val*<?php echo $usd; ?>);
  $("#eur").val(val*<?php echo $usd; ?>/<?php echo $eur; ?>);
);
$("#eur").keyup(function()
  var val = $(this).val();
  if(isNaN(val))  val =val.replace(/\D/g,''); 
  $('#usd').val(val*<?php echo $eur; ?>/<?php echo $usd; ?>);
  $("#gel").val(val*<?php echo $eur; ?>);
  $("#eur").val(val);
);
</script>

这样做是否正确？

【参考方案1】：

//html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="usd">
<input type="text" id="gel">
<input type="text" id="inr">

//jquery

$("#usd").keyup(function()
  var val = $(this).val();
  val = val.replace(/\D/g,'');
  $('#usd').val(val);
  $("#gel").val(val*55);
  $("#inr").val(val*10);
);

【讨论】：

请为您的答案添加解释，而不仅仅是提供代码。

感谢代码，但在这种情况下，所有计算都是通过#USD 输入完成的。我的目标是从任何输入表单进行计算。为了获得更好的图像，请在我的第一篇文章中检查 php。再次感谢您

这是正确的做法吗？$("#gel").keyup(function() var val = $(this).val(); if(isNaN(val)) val =val.replace(/\D/g,''); $('#usd').val(val*2); $("#gel").val(val); $("#eur ").val(val*3); ); $("#usd").keyup(function() var val = $(this).val(); if(isNaN(val)) val =val.replace(/\D/g,''); $('#usd').val(val); $("#gel").val(val*2); $("#eur").val(val*3); ); $("#eur").keyup(function() var val = $(this).val(); if(isNaN(val)) val =val.replace(/\D/g,''); $('#usd').val(val*2); $("#gel").val(val*3); $("#eur").val(val); );

是的，将货币计算的所有条件放在 3 个文本框按键事件中。

你太棒了，我如何将最终值四舍五入？我有 15.298499999999999 我需要 15.2985

【参考方案2】：

你需要使用jquery脚本如下

$("#usd").change(function()
  var val = $(this).val();
  $("#gel").val(val*55);
  $("#inr").val(val*10);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="usd">
<input type="text" id="gel">
<input type="text" id="inr">