JS some simple additions/subtractions

Hi there, I currently have a JS that works great, just need a couple of items added to it

<table>
<tr>
	<td align=center><input type="checkbox" name="transID" value="672"></td>
	<td><a href=?account=2&transaction=672>22/04/2016</a></td>
	<td>SureSave Account</td>
  <td>Comm return</td>
  <td align=right colspan=2><input type='text' size=10 name='debitamount' id="debitamount672" value="$63.00"></td>
</tr>
<tr>
	<td align=center><input type="checkbox" name="transID" value="618"></td>
	<td><a href=?account=2&transaction=618>28/04/2016</a></td>
	<td>Air Tickets Account</td>
  <td>&nbsp;</td>
  <td align=left colspan=2><input type='text' size=10 name='debitamount' id="creditamount618" value="$1,471.24"></td>
</tr>
<tr>
	<td align=center><input type="checkbox" name="transID" value="701"></td>
	<td><a href=?account=2&transaction=701>29/04/2016</a></td>
	<td>SureSave Account</td>
  <td>Comm return</td>
  <td align=right colspan=2><input type='text' size=10 name='debitamount' id="debitamount701" value="$45.60"></td>
</tr>

<tr>
	<td colspan=4>TOTALS</td>
	<td align=right><input type="text" name="debittotal" id="debittotal" size=10 disabled></td>
	<td align=right><input type="text" name="credittotal" id="credittotal" size=10 disabled></td>
</tr>
<tr>
	<td>Recon Amount</td>
	<td align=right><input type="text" name="reconamount" id="recomamount" size=10></td>
	<td colspan=2 align="right">Recon Amount</td>
	<td align=right><input type="text" name="totalrecon" id="totalrecon" size=10 disabled></td>
	<td align=right><input type="submit" name="submitrecon"></td>
</tr>
</table>

Open in new window

JS
$(document).ready( function() {

  $('input:checkbox').change(function () {
      var sum = 0;
      var val = 0;
      var sum2 = 0;
      var val2 = 0;
      $(':input:checked').each(function() {          
        if( $(this).is(':checked') ) {
        	if( $("#debitamount" + $(this).val()).length ) {
          		val2 = $("#debitamount" + $(this).val()).val().replace("$", "").replace(",", "");
          		sum2 += parseFloat( val2 );
          }
          if( $("#creditamount" + $(this).val()).length ) {
		          val = $("#creditamount" + $(this).val()).val().replace("$", "").replace(",", "");
          		sum += parseFloat( val );
          }
        }
      });
      $("#debittotal").val( '$' + formatNumWithComma( parseFloat( sum2 ).toFixed(2) ) );
      $("#credittotal").val( '$' + formatNumWithComma( parseFloat( sum ).toFixed(2) ) );
  });
  
  function formatNumWithComma(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

});

Open in new window


The functions I would like to add are:
1) totalrecon = the total value of debittotal and credit total
2) the subtraction of reconamount from totalrecon

Thanks all! :)
Graemewebber4technologiesAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
zephyr_hex (Megan)Connect With a Mentor DeveloperCommented:
Ah, I see the problem.  You need move up the lines that handle the totals.  This is because the function that handles the comma formatting changes the original value to a string instead of assigning it to a new variable.

sum2 = parseFloat( sum2 ).toFixed(2);
sum = parseFloat( sum ).toFixed(2);
var totalrecon = sum2 + sum;
var diff = totalrecon - parseFloat($('#recomamount').val());
$("#debittotal").val( '$' + formatNumWithComma(sum2));
$("#credittotal").val( '$' + formatNumWithComma(sum));
$('#totalrecon').val( '$' + formatNumWithComma(totalrecon));
//not sure where the difference goes
$('#myId').val('$' + formatNumWithComma(diff));

Open in new window

0
 
zephyr_hex (Megan)Connect With a Mentor DeveloperCommented:
It's not clear to me where you want the difference to go, so you'll need to replace "myId" in the code below with the id of the element that should receive the value.

  $('input:checkbox').change(function () {
      var sum = 0;
      var val = 0;
      var sum2 = 0;
      var val2 = 0;
      $(':input:checked').each(function() {          
        if( $(this).is(':checked') ) {
        	if( $("#debitamount" + $(this).val()).length ) {
          		val2 = $("#debitamount" + $(this).val()).val().replace("$", "").replace(",", "");
          		sum2 += parseFloat( val2 );
          }
          if( $("#creditamount" + $(this).val()).length ) {
		          val = $("#creditamount" + $(this).val()).val().replace("$", "").replace(",", "");
          		sum += parseFloat( val );
          }
        }
      });
	  sum2 = parseFloat( sum2 ).toFixed(2);
	  sum = parseFloat( sum ).toFixed(2);
      $("#debittotal").val( '$' + formatNumWithComma(sum2));
      $("#credittotal").val( '$' + formatNumWithComma(sum));
	  var totalrecon = sum2 + sum;
	  $('#totalrecon').val(formatNumWithComma(totalrecon));
	  var diff = totalrecon - parseFloat($('#recomamount').val());
	  //not sure where the difference goes
	  $('#myId').val(formatNumWithComma(diff));
  });

Open in new window

0
 
zephyr_hex (Megan)DeveloperCommented:
As a side note, you really should do some validation on the values being received from the inputs.  Much of this code depends on the inputs having valid values.  You can't always guarantee the user will input valid values.
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
Graemewebber4technologiesAuthor Commented:
Sorry I missed out 1 box for Diff

When I total the, when I added some figures (in the real sheet) for some reason, it added a whole stack of numbers after it, eg

4,281.179,999,999,999
where it should be
4,281.18

I know all the figures in the db are only upto 2 decimal place (and all the items being added in are calculated into 2 decimal place as well), so its not the data... ideas?
0
 
Graemewebber4technologiesAuthor Commented:
ignore the last, i forgot 2 lines of your code which fixed that

now the issue is...

totalrecon, when it sums, instead of summing (credittotal and debittotal), it put the values side-by-side, eg 494-100 = 494100, where should be 394
0
 
Graemewebber4technologiesAuthor Commented:
Thanks for that fix

Yes the difference goes here:

<tr>
	<td>Recon Amount</td>
	<td align=left><input type="text" name="reconamount" id="reconamount" size="10"></td>
>	<td align=left><input type="text" name="recondiff" id="recondiff" size="10" disabled></td>
	<td align="right">Total Recon Amount</td>
	<td align=right><input type="text" name="totalrecon" size="10" id="totalrecon" disabled></td>
	<td align=right><input type="submit" name="submitrecon" value="Recon"></td>
</tr>

Open in new window

0
 
zephyr_hex (Megan)Connect With a Mentor DeveloperCommented:
so this line:
//not sure where the difference goes
$('#myId').val('$' + formatNumWithComma(diff));

Open in new window


would be:
$('#recondiff').val('$' + formatNumWithComma(diff));

Open in new window

0
 
Graemewebber4technologiesAuthor Commented:
Cheers mate, works a treat! :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.