表单切换支付方式后Widget1的JavaScript计算值丢失问题求助

问题现象 #

输入所需Widget数量后切换支付方式，Widget 2的计算值保持正常，但Widget 1的计算值恢复为0，而Widget 1的输入数量仍保留在对应的输入框中。

问题原因 #

支付方式单选框的onChange事件错误调用了lf(this.value)，这里的this.value是支付方式的字符串（如"Visa"），传入lf函数后，parseFloat("Visa")返回NaN，被逻辑或替换为0，最终导致Widget 1的金额被重置为0。而Widget 2没有被支付方式的事件触发计算，因此值不受影响。

修复步骤 #

1. 删除所有支付方式单选框onChange事件中的lf(this.value)调用，仅保留calculate()，避免错误传入支付方式字符串触发Widget 1的金额重置。
2. 重构calculate函数，直接从Widget输入框获取数量，重新计算两个Widget的金额，再根据支付方式计算税费和总价，确保切换支付方式时所有数值都被正确重新计算。

修改后的完整代码 #

HTML部分 #

<html>
<head>
  <title>Test Form</title>
  <script type="text/javascript">
    onload = function() {
      location.href = "#";
    }
  </script>
</head>
<body>
  <FORM ACTION="processform.php" METHOD=POST name="frmConvert">
    <h4>Widgets For Sale</h4>
    Mandatory field *<br><br> Name*
    <br>
    <input type="text" name="sheetdata[]" size="42"><br><br> Address
    <br>
    <input type="text" name="sheetdata[]" size="42"><br><br> City
    <br>
    <input type="text" name="sheetdata[]" size="42"><br><br> Postal Code<br>
    <input type="text" name="sheetdata[]" size="42"><br><br> Email
    <br>
    <input type="text" name="sheetdata[]" size="42"><br><br> Phone*
    <br>
    <input type="text" name="sheetdata[]" size="42"><br><br> Method of payment<br>
    <input type="radio" name="sheetdata[]" value="Visa" id="visa_checked" onChange="calculate();">Visa<br>
    <input type="radio" name="sheetdata[]" value="Cheque" onChange="calculate();">Cheque<br>
    <input type="radio" name="sheetdata[]" value="E-Transfer" onChange="calculate();" checked>E Transfer<br>
    <br><br> Number of Widget One needed:<br>
    <input name="sheetdata[]" id="txtAmount" type="text" value="" onchange="lf(this.value);calculate();" size="3" value="0" /> @ $100 <input name="sheetdata[]" size="5" readonly="readonly" id="box1" value="0" />
    <br><br> Number of Widget Two needed<br>
    <input name="sheetdata[]" id="txtAmount2" type="text" value="" onChange="rf(this.value);calculate();" size="3" value="0" /> @ $200 <input name="sheetdata[]" size="5" readonly="readonly" id="box2" value="0" />
    <br><br> Tax 12% <input name="sheetdata[]" id="result" size="5" readonly="readonly" /> 3 % added for Credit Card
    <br><br> Total <input name="sheetdata[]" id="result2" size="5" readonly="readonly" />
    <input type="hidden" name="sheet_name" value="Test_Form">
    <p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
    <p>Thank You!</p>
  </form>
</body>
</html>

JavaScript部分 #

function lf(vntAmount) {
  vntAmount = parseFloat(vntAmount) || 0;
  vntAmount = vntAmount * 100; // cost of widget 1
  document.frmConvert.box1.value = vntAmount.toFixed(2)
}

function rf(vntAmount) {
  vntAmount = parseFloat(vntAmount) || 0;
  vntAmount = vntAmount * 200; // cost of widget 2
  document.frmConvert.box2.value = vntAmount.toFixed(2)
}

function calculate() {
  // 重新获取Widget数量并计算金额，确保数值正确
  const widget1Qty = parseFloat(document.getElementById('txtAmount').value) || 0;
  const widget2Qty = parseFloat(document.getElementById('txtAmount2').value) || 0;
  
  const widget1Total = widget1Qty * 100;
  const widget2Total = widget2Qty * 200;
  
  // 更新显示的金额
  document.frmConvert.box1.value = widget1Total.toFixed(2);
  document.frmConvert.box2.value = widget2Total.toFixed(2);
  
  // 计算税费和总价
  const subtotal = widget1Total + widget2Total;
  const taxRate = document.getElementById('visa_checked').checked ? 0.15 : 0.12;
  const tax = subtotal * taxRate;
  const total = subtotal + tax;
  
  document.getElementById('result').value = tax.toFixed(2);
  document.getElementById('result2').value = '$' + total.toFixed(2);
}

CSS部分（无修改） #

body {
  font-family: arial;
  font-size: 100%;
  color: #aea2a2
}

内容的提问来源于stack exchange，提问作者user3108501