Im writing JavaScript validation form code that shows an error message and preve
ID: 3634953 • Letter: I
Question
Im writing JavaScript validation form code that shows an error message and prevents submission if any quantity field have non numeric data. Im having problems getting my code to show error message and prevents submission <html> <head> <title> Tools Sales </title> <script type="text/javascript"> function chkNum(){ var myNumber = document.getElementById(saw); var myNumber = document.getElementById(hoe); var myNumber = document.getElementById(planer); var pos = myNumber.value.search(/^[0-9]+$/); if (pos != 0) { alert("You must enter a number"); return false; }else return true; } </script> </head> <body> <form name = "ab" action = "http://webdev.spsu.edu/formtest.php"> <h2> Damon Tools Sale </h2> <table> <tr> <td> Buyers Name: </td> <td> <input type = "text" name = "name" size = "30" /> </td> </tr> <tr> <td> Street Address: </td> <td> <input type = "text" name = "street" size = "30" /> </td> </tr> <tr> <td> City, State, Zip: </td> <td> <input type = "text" name = "city" size = "30" /> </td> </tr> </table> <p/> <table border = "border"> <tr> <th> Product Name </th> <th> Shipment Weight </th> <th> Price </th> <th> Quantity </th> </tr> <tr> <td> Saw </td> <td> 10 lb. </td> <td> $5.00 </td> <td> <input type = "text" name = "saw" size = "2" /> </td> </tr> <tr> <td> Hoe </td> <td> 15 lb. </td> <td> $10.00 </td> <td> <input type = "text" name = "hoe" size = "2" /> </td> </tr> <tr> <td> Planer </td> <td> 15 lb. </td> <td> $10.00 </td> <td> <input type = "text" name = "planer" size = "2" /> </td> </tr> </table> <he> Payment Method: </he> <p> <label> <input type = "radio" name = "payment" value = "visa" checked = "checked" /> Visa </label> <br /> <label> <input type = "radio" name "payment" value = "mc" /> Master Card </label> <br /> <label> <input type = "radio" name "payment" value = "discover" /> Discover </label> <br /> <label> <input type = "radio" name "payment" value = "check" /> Check </label> <br /> </p> <p> <input type = "submit" value= "Submit Order" /> <input type = "reset" value = "Clear Order Form"/> </p> </form> </body> </html> Im writing JavaScript validation form code that shows an error message and prevents submission if any quantity field have non numeric data. Im having problems getting my code to show error message and prevents submission <html> <head> <title> Tools Sales </title> <script type="text/javascript"> function chkNum(){ var myNumber = document.getElementById(saw); var myNumber = document.getElementById(hoe); var myNumber = document.getElementById(planer); var pos = myNumber.value.search(/^[0-9]+$/); if (pos != 0) { alert("You must enter a number"); return false; }else return true; } </script> </head> <body> <form name = "ab" action = "http://webdev.spsu.edu/formtest.php"> <h2> Damon Tools Sale </h2> <table> <tr> <td> Buyers Name: </td> <td> <input type = "text" name = "name" size = "30" /> </td> </tr> <tr> <td> Street Address: </td> <td> <input type = "text" name = "street" size = "30" /> </td> </tr> <tr> <td> City, State, Zip: </td> <td> <input type = "text" name = "city" size = "30" /> </td> </tr> </table> <p/> <table border = "border"> <tr> <th> Product Name </th> <th> Shipment Weight </th> <th> Price </th> <th> Quantity </th> </tr> <tr> <td> Saw </td> <td> 10 lb. </td> <td> $5.00 </td> <td> <input type = "text" name = "saw" size = "2" /> </td> </tr> <tr> <td> Hoe </td> <td> 15 lb. </td> <td> $10.00 </td> <td> <input type = "text" name = "hoe" size = "2" /> </td> </tr> <tr> <td> Planer </td> <td> 15 lb. </td> <td> $10.00 </td> <td> <input type = "text" name = "planer" size = "2" /> </td> </tr> </table> <he> Payment Method: </he> <p> <label> <input type = "radio" name = "payment" value = "visa" checked = "checked" /> Visa </label> <br /> <label> <input type = "radio" name "payment" value = "mc" /> Master Card </label> <br /> <label> <input type = "radio" name "payment" value = "discover" /> Discover </label> <br /> <label> <input type = "radio" name "payment" value = "check" /> Check </label> <br /> </p> <p> <input type = "submit" value= "Submit Order" /> <input type = "reset" value = "Clear Order Form"/> </p> </form> </body> </html>Explanation / Answer
Hi,
The main reason your not seeing your validation popup is that your page never calls the chkNum() function -- it just performs a Submit, regardless of the data. This is because of this line:
<input type = "submit" value= "Submit Order" />
A "submit" button does just that -- submits the page. What you want is something like this:
<input type = "button" value= "Submit Order"/>
The type is now "button" which does whatever you tell it to do in the "onClick" event. You can see that I've told it to call the "chkNum()" javascript method and if it returns True, submit the form.
That'll allow your validation function to be called. But there are some issues within that as well.
1. You're using the same myNumber variable for all three of your quantity values. Each time you assign to it, you've overwritten the prior value. So basically you're only validating the 3rd quantity box.
2. Your values inside of getElementById() need to be quoted: getElementById(saw) should be getElementById("saw")
Here's an updated version of your validation routine:
This updated version assumes that only one of the 3 quantities needs a value assigned (at a minimum).
Hope this helps -- let me know if you have any questions.
Thanks,
Joe