AV1611 Posted May 19, 2009 Share Posted May 19, 2009 I know nothing about JS but am pretty PHP savy. I almost always can do whatever I want in PHP but in this case I need some help with a one time JS that I will use for 10 days then prolly never need again. I am making a signup form for a charity event. All I need is to make a column of things and a subtotal. I will use checkbox's for the items item 1 - $10 item 2 - $10 item 3 - $50 then at the bottom I need a input text that is updated to whatever the total of all the items with checks then they hit submit and that's it. I can handle the rest. I just have no idea how to make the value of the text input reflect the total of the items checked. Thanks for any help. Quote Link to comment Share on other sites More sharing options...
Ken2k7 Posted May 19, 2009 Share Posted May 19, 2009 Do the input field have a value attribute that states the price? Quote Link to comment Share on other sites More sharing options...
Axeia Posted May 19, 2009 Share Posted May 19, 2009 <html> <head><title>x</title></head> <body> <form> <fieldset id="donations"> <legend>Donate to the</legend> <input type="checkbox" onchange="donate(this.value)" value="10" onchange name="pinguins" id="pinguins" /><label for="pinguins">$10 - Pinguins</label> <input type="checkbox" onchange="donate(this.value)" value="10" name="hamsters" id="hamsters" /><label for="hamsters">$10 - hamsters</label> <input type="checkbox" onchange="donate(this.value)" value="50" name="elephants" id="elephants" /><label for="elephants">$50 - elephants</label> <script type="text/javascript"> var dons = document.createElement( "input" ); document.getElementById( "donations" ).appendChild( dons ); function donate() { dons.value = 0; var inp = donations.getElementsByTagName( 'input' ); for( var i = 0; i<inp.length; i++ ) if( inp[i].type && inp[i].type == 'checkbox' && inp[i].checked ) dons.value = parseInt( dons.value ) + parseInt( inp[i].value ); } </script> </fieldset> </form> </body> </html> ? Quote Link to comment Share on other sites More sharing options...
AV1611 Posted May 19, 2009 Author Share Posted May 19, 2009 <html> <head><title>x</title></head> <body> <form> <fieldset id="donations"> <legend>Donate to the</legend> <input type="checkbox" onchange="donate(this.value)" value="10" onchange name="pinguins" id="pinguins" /><label for="pinguins">$10 - Pinguins</label> <input type="checkbox" onchange="donate(this.value)" value="10" name="hamsters" id="hamsters" /><label for="hamsters">$10 - hamsters</label> <input type="checkbox" onchange="donate(this.value)" value="50" name="elephants" id="elephants" /><label for="elephants">$50 - elephants</label> <script type="text/javascript"> var dons = document.createElement( "input" ); document.getElementById( "donations" ).appendChild( dons ); function donate() { dons.value = 0; var inp = donations.getElementsByTagName( 'input' ); for( var i = 0; i<inp.length; i++ ) if( inp[i].type && inp[i].type == 'checkbox' && inp[i].checked ) dons.value = parseInt( dons.value ) + parseInt( inp[i].value ); } </script> </fieldset> </form> </body> </html> ? First thank you so very much. This is what I needed. Second... It doesn't work No matter what I check, the value is "0" in the box. I'm not sure what info I need to give you more? Quote Link to comment Share on other sites More sharing options...
Axeia Posted May 20, 2009 Share Posted May 20, 2009 Ummm which browser are you using works fine for me in konqueror (don't have access to any other browser atm) quite sure it worked in firefox as well when I tested it yesterday. Quote Link to comment Share on other sites More sharing options...
Ken2k7 Posted May 20, 2009 Share Posted May 20, 2009 <html> <head><title>x</title></head> <body> <form name="form1"> <fieldset id="donations"> <legend>Donate to the</legend> Penguins: <input type="checkbox" onclick="donate()" value="10" onchange name="pinguins" id="pinguins" /><label for="pinguins">$10 - Pinguins</label><br /> Hamsters: <input type="checkbox" onclick="donate()" value="10" name="hamsters" id="hamsters" /><label for="hamsters">$10 - hamsters</label><br /> Elephants: <input type="checkbox" onclick="donate()" value="50" name="elephants" id="elephants" /><label for="elephants">$50 - elephants</label><br /> Total: <input type="text" name="total" id="total" readonly="readonly" /> <script type="text/javascript"> function donate() { var total = 0; var inp = document.forms.form1.getElementsByTagName( 'input' ); for( var i = inp.length; --i > -1; ) if(inp[i].type === 'checkbox' && inp[i].checked) total += inp[i].value; document.forms.form1.total.value = total; } </script> </fieldset> </form> </body> </html> Quote Link to comment Share on other sites More sharing options...
Axeia Posted May 20, 2009 Share Posted May 20, 2009 Will need some parseInt() at the very least or it will just do something like 101050 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.