Solved

Autosum input type=text when checkbox is true

Posted on 2016-07-25
28
82 Views
Last Modified: 2016-09-19
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
Comment
Question by:Graeme
  • 16
  • 12
28 Comments
 
LVL 32

Expert Comment

by:Big Monty
ID: 41727655
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
 

Author Comment

by:Graeme
ID: 41727746
Hi Big Monty, what I have so far is just the layout for what I want, nothing else (code above)
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 41728145
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
 

Author Comment

by:Graeme
ID: 41738498
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
 
LVL 32

Expert Comment

by:Big Monty
ID: 41738951
please set up a jsFiddle and we can diagnose it from there
0
 

Author Comment

by:Graeme
ID: 41740126
sorry, jsFiddle?
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 41740613
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
 

Author Comment

by:Graeme
ID: 41741772
oh right! here we are! :)

https://jsfiddle.net/Ls3ap0th/3
0
 

Author Comment

by:Graeme
ID: 41746601
Hi BigMonty, how did you go with my Fiddle? :)
0
 

Author Comment

by:Graeme
ID: 41749998
just checked the link, didnt work...

https://jsfiddle.net/webber4/Ls3ap0th/3/
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 41751384
I'll try to get to this within the next few days, as I'm on travel in Australia right now
0
 

Author Comment

by:Graeme
ID: 41751488
Oh are you? Im in Aus! :) Where abouts are you?

And no issues with getting to it :)
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 41751512
I visiting Melbourne for 2 weeks... How about you?
0
 

Author Comment

by:Graeme
ID: 41751514
I'm on the other side of Aus in Perth. Welcome! Too bad the weather isn't flash!
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 32

Expert Comment

by:Big Monty
ID: 41751525
Hehe thanks... Weather here is a lot nicer than Boston, where it's hotter than hell :)
0
 

Author Comment

by:Graeme
ID: 41751526
I was in Boston in OCT/NOV last year, definitely do not remember it being hot :P
0
 

Author Comment

by:Graeme
ID: 41774648
This is still ongoing, please keep open
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 41774699
i just got back from australia today, will have a look later on to resume this question
0
 

Author Comment

by:Graeme
ID: 41774729
fantastic, thank you
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 41782287
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
 

Author Comment

by:Graeme
ID: 41787280
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
 

Author Comment

by:Graeme
ID: 41794213
Hey mate, how did you go on this?
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 41794223
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
 

Author Comment

by:Graeme
ID: 41794268
fantastic! thank you!
0
 
LVL 32

Accepted Solution

by:
Big Monty earned 500 total points
ID: 41796782
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
 

Assisted Solution

by:Graeme
Graeme earned 0 total points
ID: 41804957
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
 
LVL 32

Assisted Solution

by:Big Monty
Big Monty earned 500 total points
ID: 41804968
stick it in your header <head> tags
0
 

Author Closing Comment

by:Graeme
ID: 41804995
Works perfect! Thank you!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I recently decide that I needed a way to make my pages scream on the net.   While searching around how I can accomplish this I stumbled across a great article that stated "minimize the server requests." I got to thinking, hey, I use more than one…
I would like to start this tip/trick by saying Thank You, to all who said that this could not be done, as it forced me to make sure that it could be accomplished. :) To start, I want to make sure everyone understands the importance of utilizing p…
Internet Business Fax to Email Made Easy - With  eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, f…
Edureka is one of the fastest growing and most effective online learning sites.  We are here to help you succeed.

912 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now