Hi Im trying to create a form that will add two numbers and input the answer automatically into a text box. Please help. Basically, I have created two text boxes called length and width and another called total. So if I entered 5 in width and 50 in Length, I want the answer displayed automatically in Total. How would I do that. Appreciate it
Yep, if you wanted to do it on the fly you could use JS, however this can also be done by PHP if you really needed. Here's a quick JS example: <!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=utf-8" /> <title>Untitled Document</title> <script type="text/javascript"> function calcTotal(){ var y = document.getElementById("length"); var z = document.getElementById("width"); var total = (y.value*1) + (z.value*1); var a = document.getElementById("total"); a.value = total; } </script> </head> <body> Length:<input type="text" id="length" onchange="calcTotal()"/><br /> Width:<input type="text" id="width" onchange="calcTotal()"/><br /> Total: <input type="text" id="total" /> </body> </html> Code (markup):
Thankyou very much for the quick response. Woud I put this Javascript in the page that will do the formulas or as a new javasscript page.
It's up to you, in my example as you can see i've put it in the page but if you want you can put it inside an external JS file, and it will work the same.
if it is just this function you can keep it in the html page but if you are planning to add more functions better create new file cause the things can get really messed up. Otherwise its all the same where you put them
I was thinking of putting them in the HTML page since the tables are in there. When I have put the javascript at the top of the page in HTML, I can't see the tables, I can just see the javascript. why is that?
What do you mean, when you can see "I can just see the Javascript", can you actually see the JS function code in the browser window? Post your code it sounds as though you could be missing a tag or something.
When I run the script in the browser, I can see everything. but when i go back in to the php, i can just see the script for the javascript. Also, how would i make the total text box disabled so that you can not tyoe anything
<!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=utf-8" /> <title>Untitled Document</title> <script type="text/javascript"> function calcTotal(){ var y = document.getElementById("Pack Width"); var z = document.getElementById("No Round"); var total = (y.value*1) * (z.value*1); var a = document.getElementById("total"); a.value = total; } </script> </head> <body> <p>Pack Width: <input type="text" id="Pack Width" onchange="calcTotal()"/><br /> RPT Length:<input name="textfield7" type="text" id="textfield7" size="10" /> <br /> NO Across: <input name="textfield7" type="text" id="textfield7" size="10" /> <br /> No Round: <input type="text" id="No Round" onchange="calcTotal()"/><br /> Shrink TOL:<input name="textfield7" type="text" id="textfield7" size="10" /> <br /> Trim Allowance: <input name="textfield7" type="text" id="textfield7" size="10" /> </p> Plate Thickness:<input name="textfield7" type="text" id="textfield7" size="10" /> <br /> Barcode Number:<input name="textfield7" type="text" id="textfield7" size="10" /> <br /> EyeMark Size / Colour: <input name="textfield7" type="text" id="textfield7" size="10" /><input type="text" readonly="readonly"/> <br /> Print Orientation: <input name="textfield7" type="text" id="textfield7" size="10" /> <br /> Cylinder Sleeve Size: <input type="text" id="total" readonly="readonly"/> <br /> Gear Size: <input name="textfield7" type="text" id="textfield7" size="10" /> <br /> Lam Sleeve Size: <input name="textfield7" type="text" id="textfield7" size="10" /> </p> <p><br /> </p> </body> </html> <table cellspacing="0" cellpadding="0"> <TR> <TD vAlign="top" colSpan="2"><p align="center"><STRONG>Single Impression / Pack detail</STRONG></p></TD> </TR> <TR> <TD vAlign="top" width="59"><p>Pack width</p></TD> <TD vAlign="top" width="79"><p> <INPUT value="0" name="value3"> </p></TD> </TR> <TR> <TD vAlign="top" width="59"><p>RPT Length</p></TD> <TD vAlign="top" width="79"><p> <INPUT id="textfield" size="10" name="textfield"> </p></TD> </TR> <TR> <TD vAlign="top" width="59"><p>No. Across</p></TD> <TD vAlign="top" width="79"><p> <INPUT id="textfield5" size="10" name="textfield"> </p></TD> </TR> <TR> <TD vAlign="top" width="59"><p>No. Round</p></TD> <TD vAlign="top" width="79"><p> <INPUT value="0" name="value3"> </p></TD> </TR> <TR> <TD vAlign="top" width="59"><p>Shrink Tol</p></TD> <TD vAlign="top" width="79"><p> <INPUT id="textfield6" size="10" name="textfield"> </p></TD> </TR> <TR> <TD vAlign="top" width="59"><p>Trim Allowance</p></TD> <TD vAlign="top" width="79"><p> <INPUT id="textfield7" size="10" name="textfield"> </p></TD> </TR> </table> <p> </p> </body> </html> <style type="text/css"> <!-- body,td,th { font-size: 9px; } --> </style></head> <body> <p> </p> <table border="1" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" valign="top"><p align="center"><strong>Single Impression / Pack detail</strong></p></td> </tr> <tr> <td width="59" valign="top"><p>Pack width</p></td> <td width="79" valign="top"><p> Pack Width:<input type="text" id="length" onchange="calcTotal()"/><br /> </p></td> </tr> <tr> <td width="59" valign="top"><p>RPT Length</p></td> <td width="79" valign="top"><p> <input name="textfield4" type="text" id="textfield8" size="10" /> </p></td> </tr> <tr> <td width="59" valign="top"><p>No. Across</p></td> <td width="79" valign="top"><p> <input name="textfield5" type="text" id="textfield9" size="10" /> </p></td> </tr> <tr> <td width="59" valign="top"><p>No. Round</p></td> <td width="79" valign="top"><p> No Round:<input type="text" id="width" onchange="calcTotal()"/><br /> </p></td> </tr> <tr> <td width="59" valign="top"><p>Shrink Tol</p></td> <td width="79" valign="top"><p> <input name="textfield4" type="text" id="textfield4" size="10" /> </p></td> </tr> <tr> <td width="59" valign="top"><p>Trim Allowance</p></td> <td width="79" valign="top"><p> <input name="textfield4" type="text" id="textfield12" size="10" /> </p></td> </tr> </table> <p> </p> <table width="201" border="1" cellpadding="0" cellspacing="0"> <tr> <th height="0" colspan="2" scope="col">Print</th> </tr> <tr> <td width="83" height="0" scope="row">Plate Thickness </td> <td width="112" height="0"><form id="form1" name="form1" method="post" action=""> <label> <select name="select" id="select"> <option>45</option> <option>67</option> <option>100</option> <option>112</option> </select> </label> </form></td> </tr> <tr> <td width="83" height="0" scope="row">Barcode Colour </td> <td width="112" height="0"><input name="textfield11" type="text" id="textfield11" size="8" /></td> </tr> <tr> <td width="83" height="0" scope="row">Eyemark size/colour </td> <td width="112" height="0"><input type="checkbox" name="checkbox" id="checkbox" /> Black</td> </tr> <tr> <td width="83" height="0" scope="row">Print Orientation </td> <td width="112" height="0"><form id="form2" name="form2" method="post" action=""> <p> <label for="select6"></label> <select name="select3" id="select6"> <option>Surface</option> <option>Reverse</option> </select> </p> </form></td> </tr> <tr> <td width="83" height="0" scope="row">Cylinder/sleeve size </td> <td width="112" height="0">Total: <input type="text" id="total" /> </td> </tr> <tr> <td width="83" height="0" scope="row">Gear Size </td> <td width="112" height="0"><input name="textfield2" type="text" id="textfield2" size="8" /></td> </tr> <tr> <td width="83" height="0" scope="row">LAM Sleeve size </td> <td width="112" height="0"><input name="textfield3" type="text" id="textfield3" size="8" /></td> </tr> <tr> <th height="0" colspan="2" scope="row">Production</th> </tr> <tr> <td width="83" height="0" scope="row">Process control complete </td> <td width="112" height="0"><form id="form4" name="form4" method="post" action=""> <label> <select name="select2" id="select2"> <option>Yes</option> <option>No</option> </select> </label> </form></td> </tr> </table> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </body> </html>
I'd suggest two changes in the code, instead of onChange, try using onKeyPress, and to disable the out put text box Total: <input type="text" id="total" disabled="disabled"/> but doing this you will not be able to send the value to another page.
Thankyou very much for the reply, it works, perfect. Im just now stuck on a particular thing and then happy days. I'm trying to insert the search box results into a text box, I've been working on this for hours yesterday but got no where. I've got a search box and when i click search, I want the results displayed in a text box called Spec Ref. Please Help
One last thing. the script works perfectly fine which automatically adds two numbers. I was just wondering, how do i add mm to the total so that when the two numbers are added, it also displays mm e.g 650mm
Thankyou. To get the mm displayed in both length and width too, would I repeat the same procedure: var y = document.getElementById("RPT Length");"mm";
Thanks. I have done used javascript but stuck on a small issue. Ive got the mm displayed in the total, but I also want mm displayed in the other two boxes(RPT Length and No Round). This is the coding: <script type="text/javascript"> function calcTotal(){ var y = document.getElementById("RPT Length"); var z = document.getElementById("No Round"); var total = (y.value*1) * (z.value*1); var a = document.getElementById("total"); a.value = total+="mm"; } </script>
Hm but isn't the user entering the width and length, so do you want them to write mm, or do you want it to automatically add mm after they've entered their number in?? Then you could just add the lines: y.value += "mm"; z.value += "mm"; But I don't know if this will mess up the addition cause it's trying to add Strings instead of numbers now, I can't test it.. but if this is a problem then you would simply remove the mm for the calculation via: y.replace("mm",""); z.replace("mm",""); should do the trick meaning your final code would be: <script type="text/javascript"> function calcTotal(){ var y = document.getElementById("RPT Length"); var z = document.getElementById("No Round"); y.replace("mm",""); z.replace("mm",""); var total = (y.value*1) * (z.value*1); var a = document.getElementById("total"); a.value = total+="mm"; y.value += "mm"; z.value += "mm"; } </script> Code (markup): Haven't tested it though
It partially works. when I enter a number in RPT Length, it displays the mm automatically, but when i do that do No round, the total becomes nan. It doesnt display anything. As soon as you enter a number in No round, theres no value displayed in total script type="text/javascript"> function calcTotal(){ var y = document.getElementById("RPT Length"); var z = document.getElementById("No Round"); var total = (y.value*1) * (z.value*1); var a = document.getElementById("total"); a.value = total+="mm"; y.value += "mm"; z.value += "mm"; } </script>