Question

我的表格有很多字段。在这些字段中，有从payment1到payment12的付款字段。只要将值输入到这些字段中，它就应该自动添加所有值。有时，用户可能会输入少数字段，也可能全部输入。

问题是，在我输入所有字段的值之前，我没有得到总和以下是代码：

<?php
require_once('../../Admin Panel/db.php');

$remoteemployeeid = $_GET['RemoteEmployeeID'];

?>
<!doctype html>
<html lang="en-us">
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

    <script>
  $(document).ready(function() {
    $("#datepicker1, #datepicker2, #datepicker3, #datepicker4, #datepicker5, #datepicker6, #datepicker7, #datepicker8, #datepicker9, #datepicker10, #datepicker11, #datepicker12").datepicker();
  });
  </script>

<script type="text/javascript">

function transaction() 
{
    var AmountEarned      = parseInt(document.TransactionForm.AmountEarned.value);
    var taxdeduction      = parseInt(document.TransactionForm.taxdeduction.value);
    var TotalReceivedToDate = parseInt(document.TransactionForm.TotalReceivedToDate.value);
    var amountremainwithoffice = parseInt(document.TransactionForm.amountremainwithoffice.value);


    var PaymentsReceived1 = parseInt(document.TransactionForm.PaymentsReceived1.value);
    var PaymentsReceived2 = parseInt(document.TransactionForm.PaymentsReceived2.value);
    var PaymentsReceived3 = parseInt(document.TransactionForm.PaymentsReceived3.value);
    var PaymentsReceived4 = parseInt(document.TransactionForm.PaymentsReceived4.value);
    var PaymentsReceived5 = parseInt(document.TransactionForm.PaymentsReceived5.value);
    var PaymentsReceived6 = parseInt(document.TransactionForm.PaymentsReceived6.value);
    var PaymentsReceived7 = parseInt(document.TransactionForm.PaymentsReceived7.value);
    var PaymentsReceived8 = parseInt(document.TransactionForm.PaymentsReceived8.value);
    var PaymentsReceived9 = parseInt(document.TransactionForm.PaymentsReceived9.value);
    var PaymentsReceived10 = parseInt(document.TransactionForm.PaymentsReceived10.value);
    var PaymentsReceived11 = parseInt(document.TransactionForm.PaymentsReceived11.value);
    var PaymentsReceived12 = parseInt(document.TransactionForm.PaymentsReceived12.value);


    var result = (AmountEarned * taxdeduction) / 100;
    var result1 = AmountEarned-result;       
    var result2 = (PaymentsReceived1 + PaymentsReceived2 + PaymentsReceived3 + PaymentsReceived4 + PaymentsReceived5 + PaymentsReceived6 + PaymentsReceived7 + PaymentsReceived8 + PaymentsReceived9 + PaymentsReceived10 + PaymentsReceived11) + PaymentsReceived12;

    var result3 = (TotalReceivedToDate - result2);    


    document.TransactionForm.tax.value = result;
    document.TransactionForm.TotalEarnAfterTax.value = result1;
    document.TransactionForm.TotalReceivedToDate.value = result2;
    document.TransactionForm.amountremainwithoffice.value = result3;


}

</script>
<style>

    table {
    border-top:1px solid #e5eff8;
    border-right:1px solid #e5eff8;
    border-left:1px solid #e5eff8;
    border-bottom:1px solid #e5eff8;
    margin:1em auto;
    border-collapse:collapse;
    font-family:"verdana";
    }
    td {
    color:#678197;
    border-bottom:1px solid #e5eff8;
     border-top:1px solid #e5eff8;
    border-left:1px solid #e5eff8;
    }

body,td,th {
    color: #000000;
}
</style>
    <title>Remote Employee Detailed Information</title>
</head>
<body>
<form action="Remote Employee Transaction History_exe.php?RemoteEmployeeID=<?php echo $remoteemployeeid ?>" name="TransactionForm" method="post">   
<table width="789" height="966" border="0" cellpadding="3" style="font-family:Verdana; margin-top:30px;" bgcolor="#CCCCCC">
  <tr>
    <td height="99" colspan="2" align="left" valign="middle" >

      <p><font size="+3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Remote Employee Transaction History </font></p>

      </td>

  </tr>
  <tr>
    <td width="35%" >Amount Earned:</td>
    <td width="65%" ><input type="number" id="AmountEarned" name="AmountEarned" onChange="transaction()" required ></td>
    </tr>
  <tr>
    <td >Tax Deduction:</td>
    <td ><select name="taxdeduction" id="taxdeduction" onChange="transaction()" required="required" style="width:153px;" ><br />
<option selected="selected" disabled="disabled" value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tax Deduction</option>
<option value="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Two Percent</option>
<option value="7">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Seven Percent</option>
<option value="10">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ten Percent</option>

</select></td>
    </tr>
  <tr >
    <td >Deducted Tax Amount:</td>
    <td ><input size="3" readonly type="nubmer" id="tax" name="tax" style="text-align:center;" ></td>
  </tr>
  <tr style="border-bottom:6px #FFFFFF solid;">
    <td > Total Earned After Tax:</td>
    <td ><input type="number" id="TotalEarnAfterTax" name="TotalEarnAfterTax" required >
      &nbsp;</td>
  </tr>
  <tr>
    <td colspan="2" align="center" ><h3>Processed Records</h3></td>
  </tr>
  <tr>
    <td >Property ID:</td>
    <td ><textarea cols="35" rows="6" name="propertyID"></textarea></td>
  </tr>
  <tr>
    <td colspan="2" align="center" ><h3>Payments Received</h3></td>
  </tr>
  <tr>
<td >Payment 1: &nbsp;&nbsp;&nbsp;<input name="Date1" type="date" id="datepicker1"></td>
    <td ><input type="number" name="PaymentsReceived1" onChange="transaction()" ></td>
    </tr>
  <tr>
    <td >Payment 2: &nbsp;&nbsp;&nbsp;<input type="date" name="Date2" id="datepicker2"></td>
    <td ><input type="number" name="PaymentsReceived2" onChange="transaction()"  ></td>
    </tr>
  <tr>
    <td >Payment 3: &nbsp;&nbsp;&nbsp;<input type="date" name="Date3" id="datepicker3"></td>
    <td ><input type="number" name="PaymentsReceived3" onChange="transaction()" ></td>
    </tr>
  <tr>
    <td >Payment 4: &nbsp;&nbsp;&nbsp;<input type="date" name="Date4" id="datepicker4"></td>
    <td ><input type="number" name="PaymentsReceived4" onChange="transaction()"  ></td>
    </tr>
  <tr>
    <td >Payment 5: &nbsp;&nbsp;&nbsp;<input type="date" name="Date5" id="datepicker5"></td>
    <td ><input type="number" name="PaymentsReceived5" onChange="transaction()" ></td>
    </tr>
  <tr>
    <td >Payment 6: &nbsp;&nbsp;&nbsp;<input type="date" name="Date6" id="datepicker6"></td>
    <td ><input type="number" name="PaymentsReceived6" onChange="transaction()" ></td>
    </tr>
  <tr>
    <td >Payment 7: &nbsp;&nbsp;&nbsp;<input type="date" name="Date7" id="datepicker7"></td>
    <td ><input type="number" name="PaymentsReceived7" onChange="transaction()" ></td>
    </tr>
  <tr>
    <td >Payment 8: &nbsp;&nbsp;&nbsp;<input type="date" name="Date8" id="datepicker8"></td>
    <td ><input type="number" name="PaymentsReceived8" onChange="transaction()" ></td>
    </tr>
  <tr>
    <td >Payment 9: &nbsp;&nbsp;&nbsp;<input type="date" name="Date9" id="datepicker9"></td>
    <td ><input type="number" name="PaymentsReceived9" onChange="transaction()" ></td>
    </tr>
  <tr>
    <td >Payment 10: &nbsp;<input type="date" name="Date10" id="datepicker10"></td>
    <td ><input type="number" name="PaymentsReceived10" onChange="transaction()" ></td>
    </tr>
  <tr>
    <td >Payment 11: &nbsp;<input type="date" name="Date11" id="datepicker11"></td>
    <td ><input type="number" name="PaymentsReceived11" onChange="transaction()" ></td>
    </tr>
  <tr style="border-bottom:6px #FFFFFF solid;">
    <td >Payment 12: &nbsp;<input type="date" name="Date12" id="datepicker12"></td>
    <td ><input type="number" name="PaymentsReceived12" onChange="transaction()" ></td>
  </tr>
  <tr>
    <td >Total Received To Date:</td>
    <td ><input type="text" id="TotalReceivedToDate" name="TotalReceivedToDate" required onChange="transaction()" ></td>
    </tr>
  <tr>
    <td >Remaining Amount With Office:</td>
    <td ><input type="number" id="amountremainwithoffice" name="amountremainwithoffice"  ></td>
  </tr>
  <tr>
    <td ><input type="submit" value="Submit To Database" style="  font: 15px verdana;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  cursor:pointer;"></td>

<td ><a href="More About Remote Employees.php?RemoteEmployeeID=<?php echo $remoteemployeeid ?>" style="
  font: 15px verdana;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  cursor:pointer;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
">Back To Information</a></td>
  </tr>
</table>
</form>
</body>
</html>

Answer 1

您必须对所有字段应用验证，如下所示。

var PaymentsReceived1 = isNaN(parseInt(document.TransactionForm.PaymentsReceived1.value))?0:parseInt(document.TransactionForm.PaymentsReceived1.value);

Answer 2

如何使用如下，

var PaymentsReceived1 = Number(document.TransactionForm.PaymentsReceived1.value);

如何通过输入自动添加数字

2 个答案: