What will I add if everytime user is unchecking the checkbox, the ammount will be reduced ? Thanks
I have a code below :
echo '<INPUT TYPE="text" NAME="eg_payamt_[]" Value="' . $amount_dueArr[$record_count] . '" size="10"><br>';//display ammountDue (AmmountDue)
echo '<INPUT TYPE="text" NAME="eg_payamt_[]" Value="' . $TotalArr[$record_count] . '" size="10"><br>';//display outstanding (Total)
<td><input type="checkbox" name="pay[]" value="" /></td>
My question is, how to calculate the total amount inside the textbox everytime user click the checkbox ?
Thanks
can you do like this :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table>
<tr>
<td><INPUT TYPE="text" NAME="eg_payamt_[]" Value="" size="10"><td><br>
<td><input type="checkbox" name="pay[]" value="" onclick="return calculateSum();" /></td>
</tr>
<tr>
<td><INPUT TYPE="text" NAME="eg_payamt_[]" Value="" size="10"><td><br>
<td><input type="checkbox" name="pay[]" value="" onclick="return calculateSum();" /></td>
<tr>
<td><INPUT TYPE="text" NAME="answer" id="answer" Value="" size="10"><td><br>
</tr>
</table>
<script>
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
//$("input:text").each(function() {
$("input[type='text'][name='eg_payamt_[]']").each(function(){
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#answer").val(sum.toFixed(2));
}
</script>
can you do like this ? is it working ? i m trying now…
complete code :
<head>
<script type="text/javascript" src="jquery-1.7.1.js">
</script>
</head>
<script>
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
//$("input:textbox").each(function() {
//$("input:eg_payamt_[]").each(function() {
$("input[type='text'][name='eg_payamt_[]']").each(function(){
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#answer").html(sum.toFixed(2));
}
</script>
<form name="payform" method="POST" action="payment.php">
<H2>Pay Invoices</H2>
<table border="0"><!--begin of the table-->
<tr>
<td><b>Date</b></td>
<td><b>Invoice</b></td>
<td><b>Ammount</b></td>
<td><b>Outstanding</b></td>
<td><b>Pay</b></td>
</tr>
<tr>
<td width="512px" colspan="5"><IMG SRC="rule-black.gif" WIDTH="800" HEIGHT="11"><br></td>
</tr>
<?php
echo '<INPUT TYPE="hidden" NAME="record" Value="'.$record.'">';
$amountDueTotal = 0;
for($record_count=0;$record_count<$record;$record_count++)
{ //loop for record count
?>
<tr>
<td>
<?php
$strDate = $node_date->nodeValue; //display the date of invoice (Date)
echo substr($strDate, -2) . '-' . substr($strDate, -4, 2) . '-' . substr($strDate, 0, 4);
//echo $node_date->nodeValue; //display the date of invoice (Date)
?>
</td>
<td>
<?php
//echo $node_inv_no->nodeValue; //display the invoice number (DocumentID)
echo '<INPUT TYPE="text" NAME="eg_description_[]" Value="' . $invoiceArr[$record_count] . '" size="20"><br>'; //display the invoice number (DocumentID)
?>
</td>
<td>
<?php
echo '<INPUT TYPE="text" NAME="eg_payamt_[]" Value="' . $amount_dueArr[$record_count] . '" size="10"><br>';//display ammountDue (AmmountDue)
//echo $node_amount_due->nodeValue; //display ammountDue (AmmountDue)
?>
</td>
<td>
<?php
echo '<INPUT TYPE="text" NAME="eg_payamt_[]" Value="' . $TotalArr[$record_count] . '" size="10"><br>';//display outstanding (Total)
//echo $node_total->nodeValue; //display outstanding (Total)
?>
</td>
<td><input type="checkbox" name="pay[]" value="" onClick="calculateSum()"/></td>
</tr>
<tr>
<td></td>
<?php
$amountDueTotal += $amount_dueArr[$record_count]; //calculate the total ammount due
//Hidden fields
echo '<INPUT TYPE="hidden" NAME="eg_invoice_[]" Value="'.$invoiceNoArr[$record_count].'">';
echo '<INPUT TYPE="hidden" NAME="p_invage_[]" Value="'.$DateArr[$record_count].'">';
}//end of the record count loop
?>
<tr>
<td>Pay Ammount Not Listed Above</td>
<td><input type="text" name="UnknownDocumentID" value="Invoice_unknown_docID_data" /></td>
<!--<td><input type="text" name="Amount_Due_Unknown_Doc_ID" value="amount" size="10"/></td>--><!--Amount Due-->
<td><input type="text" name="eg_payamt_[]" value="amount" size="10"/></td><!--Total-->
<td></td>
<td><input type="checkbox" name="pay[]" value="" onClick="calculateSum()"/></td>
</tr>
<tr>
<td width="512px" colspan="5"><IMG SRC="rule-black.gif" WIDTH="800" HEIGHT="11"><br></td>
</tr>
<td>Total ammount to pay</td>
<td></td>
<td></td>
<td>
<!--<input type="text" name="total" value="<?php //echo $amountDueTotal;?>" />-->
<input type="text" name="totalNS" id="answer" value="" />
<INPUT TYPE="text" NAME="answer" id="answer" Value="" size="10"><br>
</td>
</tr>
Payment after click, no result :
Am I writing the right code ?
<INPUT TYPE="text" name="answer" id="answer" Value="" size="10">
because when I put
document.write(sum);
****Got the answer :****
<script type="text/javascript">
function checkTotal() {
document.listForm.total.value = '';
var sum = 0;
for (i=0;i<document.listForm.choice.length;i++) {
if (document.listForm.choice[i].checked) {
sum = sum + parseInt(document.listForm.choice[i].value);
}
}
document.listForm.total.value = sum;
}
</script>
<form name="listForm">
<input type="checkbox" name="choice" value="2" onchange="checkTotal()"/>2<br/>
<input type="checkbox" name="choice" value="5" onchange="checkTotal()"/>5<br/>
<input type="checkbox" name="choice" value="10" onchange="checkTotal()"/>10<br/>
<input type="checkbox" name="choice" value="20" onchange="checkTotal()"/>20<br/>
Total: <input type="text" size="2" name="total" value="0"/>
</form>
Let’s work out on this below code..
This working fine for me..Check it out.
Thanks.