Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 128
  • Last Modified:

Autosum input type=text when checkbox is true

Hi all and thanks in advance for your help

I am looking to create an account page to match up sums
<tr>
	<td align=center><input type="checkbox" name="transID"></td>
	<td><a href=?account=2&transaction=672>22/04/2016</a></td>
	<td>SureSave Account</td><td>Comm return</td><td align=right><input type='text' size=10 name='debitamount' value=-$63.00></td><td>&nbsp;</td>
</tr>
<tr>
	<td align=center><input type="checkbox" name="transID"></td>
	<td><a href=?account=2&transaction=618>28/04/2016</a></td>
	<td>Air Tickets Account</td><td></td><td align=right><input type='text' size=10 name='debitamount' value=$1,471.24></td><td>&nbsp;</td>
</tr>
<tr>
	<td align=center><input type="checkbox" name="transID"></td>
	<td><a href=?account=2&transaction=701>29/04/2016</a></td>
	<td>SureSave Account</td><td>Comm return</td><td align=right><input type='text' size=10 name='debitamount' value=-$45.60></td><td>&nbsp;</td>
</tr>
<tr>
	<td align=center><input type="checkbox" name="transID"></td>
	<td><a href=?account=2&transaction=621>2/05/2016</a></td>
	<td>Air Tickets Account</td><td></td><td align=right><input type='text' size=10 name='debitamount' value=$262.54></td><td>&nbsp;</td>
</tr>
<tr>
	<td align=center><input type="checkbox" name="transID"></td>
	<td><a href=?account=2&transaction=622>2/05/2016</a></td>
	<td>Air Tickets Account</td><td></td><td align=right><input type='text' size=10 name='debitamount' value=$262.54></td><td>&nbsp;</td>
</tr>
<tr>
	<td align=center><input type="checkbox" name="transID"></td>
	<td><a href=?account=2&transaction=662>5/05/2016</a></td>
	<td>Commission Transfer</td><td> </td><td align=right><input type='text' size=10 name='debitamount' value=$33.31></td><td>&nbsp;</td>
</tr>
<tr>
	<td colspan=4>TOTALS</td>
	<td align=right><input type="text" name="debittotal" size=10></td>
	<td align=right><input type="text" name="credittotal" size=10></td>
</tr>
<tr>
	<td colspan=4>Recon Amount</td>
	<td align=right><input type="text" name="amounttorecon" size=10></td>
	<td align=right><input type="text" name="totalrecon" size=10 placeholder="Total Recon Amount" disabled</td>
</tr>

Open in new window


So I would like the checked amounts to autosum into either debittotal or credittotal (which ever side they are)

Then it will sum to totalrecon

Cheers
0
Graeme
Asked:
Graeme
  • 16
  • 12
3 Solutions
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
do you want to do this client side i assume?

can you show us what you've gotten so far and where you need help?
0
 
Graemewebber4technologiesAuthor Commented:
Hi Big Monty, what I have so far is just the layout for what I want, nothing else (code above)
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
Add a class name to each of your individual text box that you want to add. Call it "addUp". Then, you could use the following jquery to add up each of those text boxes:

$(document).on("change", ".addUp", function() {
    var sum = 0;
    $(".addUp").each(function(){
        sum += +$(this).val();
    });
    $("#totalrecon").val(sum);
});

Open in new window


I don't really understand what " to autosum into either debittotal or credittotal (which ever side they are)" means, so let's skip that part for now. Put in the code above, see if you can get that working, then report back.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Graemewebber4technologiesAuthor Commented:
Hi, sorry was away for a tournament

thanks for the help BigMonty as always, I have applied the code you have suggested:
<tr>
	<td align=center><input type="checkbox" name="transID"></td>
	<td><a href=?account=2&transaction=672>22/04/2016</a></td>
	<td>SureSave Account</td><td>Comm return</td><td align=right><input type='text' size=10 name='debitamount' value=-$63.00 class="addUp"></td><td>&nbsp;</td>
</tr>
<tr>
	<td align=center><input type="checkbox" name="transID"></td>
	<td><a href=?account=2&transaction=618>28/04/2016</a></td>
	<td>Air Tickets Account</td><td></td><td align=right><input type='text' size=10 name='debitamount' value=$1,471.24 class="addUp"></td><td>&nbsp;</td>
</tr>
<tr>
	<td align=center><input type="checkbox" name="transID"></td>
	<td><a href=?account=2&transaction=701>29/04/2016</a></td>
	<td>SureSave Account</td><td>Comm return</td><td align=right><input type='text' size=10 name='debitamount' value=-$45.60></td><td>&nbsp;</td>
</tr>
<tr>
	<td align=center><input type="checkbox" name="transID"></td>
	<td><a href=?account=2&transaction=621>2/05/2016</a></td>
	<td>Air Tickets Account</td><td></td><td align=right><input type='text' size=10 name='debitamount' value=$262.54 class="addUp"></td><td>&nbsp;</td>
</tr>
<tr>
	<td align=center><input type="checkbox" name="transID"></td>
	<td><a href=?account=2&transaction=622>2/05/2016</a></td>
	<td>Air Tickets Account</td><td></td><td align=right><input type='text' size=10 name='debitamount' value=$262.54 class="addUp"></td><td>&nbsp;</td>
</tr>
<tr>
	<td align=center><input type="checkbox" name="transID"></td>
	<td><a href=?account=2&transaction=662>5/05/2016</a></td>
	<td>Commission Transfer</td><td> </td><td align=right><input type='text' size=10 name='debitamount' value=$33.3 class="addUp"1></td><td>&nbsp;</td>
</tr>
<tr>
	<td colspan=4>TOTALS</td>
	<td align=right><input type="text" name="debittotal" size=10></td>
	<td align=right><input type="text" name="credittotal" size=10></td>
</tr>
<tr>
	<td colspan=4>Recon Amount</td>
	<td align=right><input type="text" name="amounttorecon" size=10></td>
	<td align=right><input type="text" name="totalrecon" size=10 placeholder="Total Recon Amount" disabled</td>
</tr>
<script type="text/javascript">
	$(document).on("change", ".addUp", function() {
	    var sum = 0;
	    $(".addUp").each(function(){
	    sum += +$(this).val();
	    });
	    $("#totalrecon").val(sum);
	});
</script>

Open in new window


looking at the page itself, i cant see any physical difference... is this correct?
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
please set up a jsFiddle and we can diagnose it from there
0
 
Graemewebber4technologiesAuthor Commented:
sorry, jsFiddle?
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
jsFiddle is a site where you can write out html / javascript all on the same page and allow others to view and run it. Essentially it'll allow for us to collaborate together on the code
0
 
Graemewebber4technologiesAuthor Commented:
oh right! here we are! :)

https://jsfiddle.net/Ls3ap0th/3
0
 
Graemewebber4technologiesAuthor Commented:
Hi BigMonty, how did you go with my Fiddle? :)
0
 
Graemewebber4technologiesAuthor Commented:
just checked the link, didnt work...

https://jsfiddle.net/webber4/Ls3ap0th/3/
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
I'll try to get to this within the next few days, as I'm on travel in Australia right now
0
 
Graemewebber4technologiesAuthor Commented:
Oh are you? Im in Aus! :) Where abouts are you?

And no issues with getting to it :)
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
I visiting Melbourne for 2 weeks... How about you?
0
 
Graemewebber4technologiesAuthor Commented:
I'm on the other side of Aus in Perth. Welcome! Too bad the weather isn't flash!
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
Hehe thanks... Weather here is a lot nicer than Boston, where it's hotter than hell :)
0
 
Graemewebber4technologiesAuthor Commented:
I was in Boston in OCT/NOV last year, definitely do not remember it being hot :P
0
 
Graemewebber4technologiesAuthor Commented:
This is still ongoing, please keep open
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
i just got back from australia today, will have a look later on to resume this question
0
 
Graemewebber4technologiesAuthor Commented:
fantastic, thank you
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
have a go with this fiddle and let me know if I'm close. If so, I'll do a write up explaining more what you need to do to incorporate it into your code if you like:

https://jsfiddle.net/bigmonty/kkna3mxq/2/
0
 
Graemewebber4technologiesAuthor Commented:
Thanks for the BigMonty, working great, however for some reason when line 2 is checked with the line above or below, it doubles the value? very strange
0
 
Graemewebber4technologiesAuthor Commented:
Hey mate, how did you go on this?
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
I'll try to have a look at both of your questions later on today. I think we're really close and should have a solution for you soon.
0
 
Graemewebber4technologiesAuthor Commented:
fantastic! thank you!
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
give this a shot:

https://jsfiddle.net/bigmonty/kkna3mxq/4/

I want you to take note of the HTML changes I made, mainly how I added ID's to each checkbox and textbox. Also, please get in the habit of surrounding your attributes VALUE tags with quotes. If you don't do that, you run the risk of mal-formed HTML, which'll give you major headaches!
0
 
Graemewebber4technologiesAuthor Commented:
Hi BigMonty, I am finally applying and integrating this code. Thank you

Where do I place the JS, also do I give these surroundings
<script language="Javascript"></script>

Cheers
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
stick it in your header <head> tags
0
 
Graemewebber4technologiesAuthor Commented:
Works perfect! Thank you!
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 16
  • 12
Tackle projects and never again get stuck behind a technical roadblock.
Join Now