aliasneo86 Posted November 6, 2008 Share Posted November 6, 2008 I have a editable grid form in the transactions page. in this there is a column named amount and the no of text box values under that is unknown how can I get a java script to to the sum of all the text boxs in that column? the pic of the page is attached thanks in advance [attachment deleted by admin] Link to comment https://forums.phpfreaks.com/topic/131592-solved-get-the-sum-of-many-text-box-values/ Share on other sites More sharing options...
JasonLewis Posted November 6, 2008 Share Posted November 6, 2008 I suggest giving the textboxes, when they are generated, a class name that you'll only use on them. For example, addition_textbox. Then you can apply the following to it: <script language="javascript"> function calculate_total(className, div){ var elements = document.getElementsByClassName(className); var total = 0; for(var i = 0; i < elements.length; ++i){ total += parseInt(elements[i].value); } document.getElementById(div).innerHTML = "Total: " + total; } </script> <input type="text" name="box1" id="box1" class="addition_textbox" value="4" /><br /> <input type="text" name="box2" id="box2" class="addition_textbox" value="1" /><br /> <input type="text" name="box3" id="box3" class="addition_textbox" value="14" /><br /> <input type="text" name="box4" id="box4" class="addition_textbox" value="214" /><br /> <input type="text" name="box5" id="box5" class="addition_textbox" value="2" /><br /> <input type="text" name="box6" id="box6" class="addition_textbox" value="8" /><br /> <input type="text" name="box7" id="box7" class="addition_textbox" value="3" /><br /> <input type="text" name="box8" id="box8" class="addition_textbox" value="16" /><br /><br /> <input type="submit" name="calculate" id="calculate" value="Calculate Total" onclick="calculate_total('addition_textbox', 'total_text')" /><br /> <div id="total_text"></div> Link to comment https://forums.phpfreaks.com/topic/131592-solved-get-the-sum-of-many-text-box-values/#findComment-683457 Share on other sites More sharing options...
aliasneo86 Posted November 6, 2008 Author Share Posted November 6, 2008 thanks a million yet 1 issue document.getElementsByClassName(className) this is not working the calculation is not done after submit is pressed plz help Link to comment https://forums.phpfreaks.com/topic/131592-solved-get-the-sum-of-many-text-box-values/#findComment-683458 Share on other sites More sharing options...
JasonLewis Posted November 6, 2008 Share Posted November 6, 2008 Have you provided the input boxes with the appropriate class name then when you call the calculate function are you providing it with the same class name? That code I posted works. So you may have implemented it into your code incorrectly. Link to comment https://forums.phpfreaks.com/topic/131592-solved-get-the-sum-of-many-text-box-values/#findComment-683462 Share on other sites More sharing options...
aliasneo86 Posted November 6, 2008 Author Share Posted November 6, 2008 can you see what wrong in this that i used ur own 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script language="javascript"> function calculate_total(className, div){ var elements = document.getElementsByClassName(addition_textbox); var total = 0; for(var i = 0; i < elements.length; ++i){ total += parseInt(elements.value); } document.getElementById(div).innerHTML = "Total: " + total; } </script> </head> <body> <form name="form1" method="get"> <input type="text" name="box1" id="box1" class="addition_textbox" value="4" /><br /> <input type="text" name="box2" id="box2" class="addition_textbox" value="1" /><br /> <input type="text" name="box3" id="box3" class="addition_textbox" value="14" /><br /> <input type="text" name="box4" id="box4" class="addition_textbox" value="214" /><br /> <input type="text" name="box5" id="box5" class="addition_textbox" value="2" /><br /> <input type="text" name="box6" id="box6" class="addition_textbox" value="8" /><br /> <input type="text" name="box7" id="box7" class="addition_textbox" value="3" /><br /> <input type="text" name="box8" id="box8" class="addition_textbox" value="16" /><br /><br /> <input type="submit" name="calculate" id="calculate" value="Calculate Total" onclick="calculate_total('addition_textbox', 'total_text')" /><br /> <div id="total_text"></div> </form> </html> Link to comment https://forums.phpfreaks.com/topic/131592-solved-get-the-sum-of-many-text-box-values/#findComment-683464 Share on other sites More sharing options...
JasonLewis Posted November 6, 2008 Share Posted November 6, 2008 var elements = document.getElementsByClassName(addition_textbox); That's not what was in my code. It's supposed to be className, not addition_textbox. Link to comment https://forums.phpfreaks.com/topic/131592-solved-get-the-sum-of-many-text-box-values/#findComment-683477 Share on other sites More sharing options...
aliasneo86 Posted November 6, 2008 Author Share Posted November 6, 2008 is that the only change? because even so its not working plz help Link to comment https://forums.phpfreaks.com/topic/131592-solved-get-the-sum-of-many-text-box-values/#findComment-683563 Share on other sites More sharing options...
aliasneo86 Posted November 6, 2008 Author Share Posted November 6, 2008 the error msg pic code ==================== function calculate_total(className, div){ var elements = document.getElementsByClassName(className); var total = 0; for(var i = 0; i < elements.length; ++i){ total += parseInt(elements.value); } alert ("test"); document.getElementById(div).innerHTML = "Total: " + total; } text box <input style="WIDTH: 88px; HEIGHT: 22px; TEXT-ALIGN: right" maxlength="20" size="12" value="{amount}" name="{amount_Name}" id="{amount_Name} class="addition_textbox""> ====================== [attachment deleted by admin] Link to comment https://forums.phpfreaks.com/topic/131592-solved-get-the-sum-of-many-text-box-values/#findComment-683567 Share on other sites More sharing options...
JasonLewis Posted November 6, 2008 Share Posted November 6, 2008 Okay we'll avoid doing it that way since it's not available for all browsers. Try this instead: <script language="javascript"> function calculate_total(className, div){ var elements = document.getElementsByTagName("input"); var total = 0; for(var i = 0; i < elements.length; ++i){ if(elements[i].className == className){ total += parseInt(elements[i].value); } } document.getElementById(div).innerHTML = "Total: " + total; } </script> <input type="text" name="box1" id="box1" class="addition_textbox" value="4" /><br /> <input type="text" name="box2" id="box2" class="addition_textbox" value="1" /><br /> <input type="text" name="box3" id="box3" class="addition_textbox" value="14" /><br /> <input type="text" name="box4" id="box4" class="addition_textbox" value="214" /><br /> <input type="text" name="box5" id="box5" class="addition_textbox" value="2" /><br /> <input type="text" name="box6" id="box6" class="addition_textbox" value="8" /><br /> <input type="text" name="box7" id="box7" class="addition_textbox" value="3" /><br /> <input type="text" name="box8" id="box8" class="addition_textbox" value="16" /><br /><br /> <input type="submit" name="calculate" id="calculate" value="Calculate Total" onclick="calculate_total('addition_textbox', 'total_text')" /><br /> <div id="total_text"></div> Link to comment https://forums.phpfreaks.com/topic/131592-solved-get-the-sum-of-many-text-box-values/#findComment-683570 Share on other sites More sharing options...
aliasneo86 Posted November 6, 2008 Author Share Posted November 6, 2008 works on the normal html but when i implement it on my page its not working shall i attach my web html? can you assist me in this thanx for all the help u gave me so far Link to comment https://forums.phpfreaks.com/topic/131592-solved-get-the-sum-of-many-text-box-values/#findComment-683700 Share on other sites More sharing options...
aliasneo86 Posted November 6, 2008 Author Share Posted November 6, 2008 the html is attached [attachment deleted by admin] Link to comment https://forums.phpfreaks.com/topic/131592-solved-get-the-sum-of-many-text-box-values/#findComment-683800 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.