如何将计算从一个字段反映到另一个字段

时间:2014-04-30 13:21:12

标签: javascript

我是JavaScript的新手,我有一项我无法解决的任务。所以我有一个包含五个字段的表,我需要计算一个月的总数,然后在不同的单元格中自动生成年度总计。我完成了本月的总工作,但我不知道如何在年度细胞中反映出来。任何帮助都感激不尽。非常感谢您的时间:)

这是我的代码:

<head>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
function update() {
  var a = +document.forms['calc'].elements['fieldOne'].value,
      b = +document.forms['calc'].elements['fieldTwo'].value,
      c = +document.forms['calc'].elements['fieldThree'].value,
      d = +document.forms['calc'].elements['fieldFour'].value,
      e = +document.forms['calc'].elements['fieldFive'].value,
      fieldTotal = ((b-d)*a)*c;


  document.forms['calc'].elements['fieldTotal'].value = fieldTotal;

  return false;
}

function update2() {
  var f = +document.forms['calc'].elements['field6'].value,
      g = +document.forms['calc'].elements['field7'].value,
      h = +document.forms['calc'].elements['field8'].value,
      i = +document.forms['calc'].elements['fieldFour'].value,
      j = +document.forms['calc'].elements['fieldFive*12'].value,

      field9=fieldFour;
      field10=fieldFive*12;
      fieldTotal2=fieldTotal*12;

  document.write('fieldTotal2');
  document.write('field9');
  document.write('field10');


  return false;
}

</script>
</head>

<body>


<form name="calc" action="#">
  <table width="600" border="1">
    <tr>
      <td colspan="2">&nbsp;</td>
      <td width="63">Month</td>
      <td width="109">Year</td>
    </tr>
    <tr>
      <td colspan="2">Field1</td>
      <td><input type="text" name="fieldOne" id="fieldOne" size="15" value="5,000" /></td>
      <td><input type="text" name="field6" id="field6" size="15" value="60,000"/></td>

    </tr>
    <tr>
      <td colspan="2">Field2</td>
      <td><input type="text" name="fieldTwo" id="fieldTwo" value="3.0" size="15" /></td>
      <td><input type="text" name="field7" id="field7"  value="3.0" size="15" /></td>

    </tr>
    <tr>
      <td colspan="2">Field3</td>
      <td><input type="text" name="fieldThree" id="fieldThree" size="15" value="$350"/></td>
      <td><input type="text" name="field8" id="field8" size="15" value="$350"/></td>

    </tr>
    <tr>
      <td colspan="2">Field4</td>
      <td><input type="text" name="fieldFour" id="fieldFour" value="1.5" size="15" /></td>
      <td><input type="number" name="field9" id="field9" value="1.5" size="15" /></td>

    </tr>
    <tr>
      <td colspan="2">Filed5</td>
      <td><input type="text" name="fieldFive" id="fieldFive" size="15" value="75"/></td>
      <td><input type="text" name="field10" id="field10" size="15" /></td>

    </tr>
    <tr>
      <td width="137">Total</td>
      <td width="83"><input type="button" value="Calculate" onClick="update();return false;" /></td>
      <td><input type="text" name="fieldTotal" id="fieldTotal" size="15" readonly /></td>
      <td><input type="text" name="fieldTotal2" id="fieldTotal2" size="15" readonly /></td>
    </tr>
  </table>
</form>

</body>

1 个答案:

答案 0 :(得分:0)

根据您所描述的内容,我认为这应该适合您。

Demo

function update() {
    var frmEles = document.forms.calc.elements,
      a = frmEles.fieldOne.value.replace(',',''), //Remove comma
      b = frmEles.fieldTwo.value,
      c = frmEles.fieldThree.value.replace('$',''), //Remove Dollar sign
      d = frmEles.fieldFour.value,
      e = frmEles.fieldFive.value,
      fieldTotal = ((b-d)*a)*c;

    //Total for the month
    frmEles.fieldTotal.value = formatNumber(fieldTotal);

    //Calculations for the year
    frmEles.field6.value = formatNumber(a * 12);
    frmEles.field7.value = formatNumber(b * 12);
    frmEles.field8.value = '$' + formatNumber(c * 12); //Add back dollar sign
    frmEles.field9.value = formatNumber(d * 12);
    frmEles.field10.value = formatNumber(e * 12);
    frmEles.fieldTotal2.value = formatNumber(fieldTotal * 12);

    return false;
}

//Format the numbers with commas. 
function formatNumber(n){
    return n.toLocaleString();
}