AJAX - Getting values from clicked checkboxes and updating div

bozeman · October 17, 2011

Hi All, i have the following problem which i need some help with:

I have a payment screen where it shows a list of outstanding invoices with a corresponding checkbox - see attached image. What i would like to do is the following :

When the user clicks the checkboxes it must update the total of the payment. I'm new to jquery, any help would be appreciated.

[attachment deleted by admin]

sunfighter · October 17, 2011

You don't need AJAX for this javascript will do nicely.

Don't use check boxes, use a button with an onclick feature.

You also need to have the payment amount associated with the row. and ID's for the Total and the Payments.

Do you need code?

sunfighter · October 17, 2011

bozeman I hope you can understand what I am doing here. Good luck

When you do your query and populate your table you are going to have something like this "while($row = mysql_fetch_row($result))" to loop throught the table rows. I am just using a for loop. The thing here is you will need to declare $i equal to 1 before your while statement and have $i++; as the last line in that loop. This is needed to keep the row IDs separate. Understand ? :confused:

The for loop I use does two rows BUT puts the same values in the <td>s. The button will show you how the javascript does the increase and decreases that you wanted>

The code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>New document</title>
<meta name="generator" content="TSW WebCoder 2010" />
<script type="text/javascript">
function alter(colo)
{
document.getElementById('inv'+colo).innerHTML = ((document.getElementById('inv'+colo).innerHTML)*1 - (document.getElementById('pay'+colo).innerHTML)*1);
document.getElementById('amt'+colo).innerHTML = ((document.getElementById('amt'+colo).innerHTML)*1 + (document.getElementById('pay'+colo).innerHTML)*1);
}
</script>

</head>
<body>

<table border="1" id="payments">
<tr>
	<td style="background-color:blue;color:white;">Total Invoiced</td>
	<td style="background-color:blue;color:white;">Total Payments</td>
	<td style="background-color:blue;color:white;">Payment</td>
	<td style="background-color:blue;color:white;">Pay Now</td>
</tr>
<?php
for($i = 1; $i < 3; $i++)
{
$str = <<<ROWS
<tr>
	<td id="inv$i">29349.73</td>
	<td id="amt$i">26216.93</td>
	<td id="pay$i">2000.20</td>
	<td><input type="button" value="Pay Now" onclick="alter('$i');" /></td>
</tr>
ROWS;
echo $str;
}
?>
</table>
</body>
</html>

Good luck understanding. It does give you a simple solution to your problem and I Hope will steer you to javascript instead of jquery.

bozeman · October 18, 2011

This is a good start for me. I'm going to start working on the implementation and let you know how it goes. Thank you very much. The code was rather easy to understand.

bozeman · October 19, 2011

function ShowOpenInv($CUST) {
  global $db;
  
  $sql = "SELECT * FROM Orders WHERE Order_Status = '1' 
          AND Company_ID = '$CUST' 
	  AND Invoice_Total <> '0' 
	  AND (Invoice_Total - Payment_Total) <> '0' ";
  
  $q = $db->query($sql);
  if (PEAR::isError($q)) {
    showError ($q);
  	exit;
  } 
  $numRows = $q->numRows();  

  print "<table width='100%' border='0' cellspacing='0' cellpadding='2'><tr>
    <td class='tdTabColumns' width='50'>Invoice No</td>
    <td class='tdTabColumns' width='100'>Date</td>
<td class='tdTabColumns'>Header</td>
<td class='tdTabColumns' width='120' align='right'>Total Invoiced</td>
    <td class='tdTabColumns' width='120' align='right'>Total Payments</td>
<td class='tdTabColumns' width='120' align='right'>Shortfall</td>
<td class='tdTabColumns' width='32' align='right'>Pay now</td>
  </tr>";

  while ($row = $q->fetchRow()) {
    if ($_class == "trLine1") {
      $_class   = "trLine2";
    } else {
      $_class   = "trLine1";
    };
    $inv_no      = $row['Invoice_No'];
$inv_date    = $row['Order_Date'];
$inv_head    = $row['Order_Header'];
$inv_total   = $row['Invoice_Total'];
$inv_payment = $row['Payment_Total'];

$shortfall = $inv_total - $inv_payment;
$shortfall = number_format ($shortfall, 2, '.','') ;

print "<tr class='$_class' ONMOUSEOVER=\"this.className='mOver'\" ONMOUSEOUT=\"this.className='$_class'\" >\n";
print "<td class='tdTabDetail'>$inv_no</td>";
print "<td class='tdTabDetail'>$inv_date</td>";
print "<td class='tdTabDetail'>$inv_head</td>";
print "<td class='tdTabDetail' align='right'>$inv_total</td>";
print "<td class='tdTabDetail' align='right'>$inv_payment</td>";
print "<td class='tdTabDetail' align='right' id='ivalue$inv_no'>$shortfall</td>";
print "<td class='tdTabDetail'><input name='icb$inv_no' id='icb$inv_no' type='checkbox' value='1' onclick=\"alter('$inv_no')\"></td>";
    print "</tr>";
  }
  print "</table>";
}

<script type="text/javascript">
function alter(colo){
    if (document.getElementById('icb'+colo).checked) {
  document.getElementById('ipay_amount').value = ((document.getElementById('ipay_amount').value)*1 + (document.getElementById('ivalue'+colo).innerHTML)*1);
} else {
  document.getElementById('ipay_amount').value = ((document.getElementById('ipay_amount').value)*1 - (document.getElementById('ivalue'+colo).innerHTML)*1);
}
}
</script>

print "<input name='ipay_amount' id='ipay_amount' size='11.2' maxlength='11.2' $InputStyle value='0.00' >";

Hi, I got it all working with the checkboxes. I only have 2 problems with the system at the moment :

1. The numbers for some reason pick up numerous decimal values when adding and subtracting (eg : 54827.01000000001). But my numbers which are being worked with are all 2 decimals ?

2. How do I get the value in the ipay_total text box on post (when I view the source html it still shows 0.00 but in the browser it shows the amount)?

PS : I have included only the code parts which are effected.

Thanks for your help.

sunfighter · October 19, 2011

do you have a site up with this?

Your code mixes js with the php. You don't show the table that things are displayed in.

All those decimals are not not coming from my code. If you have the code some place I'll look, but from here Im blind. How are they defined in the table?

bozeman · October 20, 2011

The code for the display of the table is in the function ShowOpenInv().

This runs through the database and displays the table. It displays the values correctly from the php code but when working on it from the java bit it gives the multiple decimal value in the ipay_amount text box. All the code is in my previous post. I can give you access to the script, but i dont want to post the link here though.

bozeman · October 31, 2011

Hi Sunfighter, I have your code up on tour site : www.msits.co.za/manage/test_java.php. It does generate decimals if you unselect randomly. Not sure how to work around this issue.

sunfighter · October 31, 2011

Yes it is a strange thing indeed and I can't answer it, but I know what we have to do. We have to disable the checkbox after the first click. New code for two rows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>New document</title>
<meta name="generator" content="TSW WebCoder 2010" />
<script type="text/javascript">
function alter(colo){
document.getElementById('inv'+colo).innerHTML = ((document.getElementById('inv'+colo).innerHTML)*1 - (document.getElementById('pay'+colo).innerHTML)*1);
document.getElementById('amt'+colo).innerHTML = ((document.getElementById('amt'+colo).innerHTML)*1 + (document.getElementById('pay'+colo).innerHTML)*1);
document.getElementById('itotal').value = ((document.getElementById('amt'+colo).innerHTML)*1 + (document.getElementById('pay'+colo).innerHTML)*1);
document.getElementById('icb'+colo).disabled=true;


}
</script>
</head>
<body>
<table border="1" id="payments">
<tr>
	<td style="background-color:blue;color:white;">Total Invoiced</td>
        <td style="background-color:blue;color:white;">Total Payments</td>
        <td style="background-color:blue;color:white;">Payment</td>
        <td style="background-color:blue;color:white;">Pay Now</td>
    </tr>
    <tr>
<td id="inv1">29349.73</td>
<td id="amt1">26216.93</td>
<td id="pay1">2000.20</td>
<td><input id="icb1" type="checkbox" value="1" onclick="alter('1');" /></td>
</tr><tr>
<td id="inv2">29349.73</td>
<td id="amt2">26216.93</td>
<td id="pay2">2000.20</td>
<td><input id="icb2" type="checkbox" value="1" onclick="alter('2');" /></td>
</tr>
<tr>
  <td style="background-color:blue;color:white;"> </td>
  <td style="background-color:blue;color:white;"> </td> 
  <td style="background-color:blue;color:white;"><input name="itotal" id="itotal" type="text" value="0.00" size="25" maxlength="25" /></td>
  <td style="background-color:blue;color:white;"> </td>
</tr>
</table>
</body>
</html>

Sign In

AJAX - Getting values from clicked checkboxes and updating div

Recommended Posts

bozeman

Link to comment

Share on other sites

sunfighter

Link to comment

Share on other sites

sunfighter

Link to comment

Share on other sites

bozeman

Link to comment

Share on other sites

bozeman

Link to comment

Share on other sites

sunfighter

Link to comment

Share on other sites

bozeman

Link to comment

Share on other sites

bozeman

Link to comment

Share on other sites

sunfighter

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information