toby_nator Posted March 10, 2010 Share Posted March 10, 2010 Hi valued reader of this postI am new to javascript and am working my way through the tutorial.I am working on an order form at my websiteI found a tutorial somewhere else on the net on how to build this java script, however it doesn't work properly .and the other web site does not have a forum to ask for help.The script was meant to stop the user from entering anything but valid numbers into the order boxes and give a warning if anything else was entered.The script also was meant to stop the form from being submitted if some of the red marked fields were left empty, again this is not working.I will include the whole page code in the codebox brackets as described in the guidelines and hope that it works.Any help on this would be greatly appreciated!Toby <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Language" content="en-us"><meta http-equiv="Content-Type" content="text/html; charset=us-ascii"><title>Welcome to the Wonder Weeder Website</title><meta name="description" content="The Wonder Weeder produced in New Zealand. A simple but very effective tool."><meta name="keywords" content="wonder, weeder, New, Zealand, Hutt, arthritis"><link rel="shortcut icon" href="images/wonderweedericon.gif"><script language="javascript" type="text/javascript"><!--function dm(amount) { string = "" + amount; dec = string.length - string.indexOf('.'); if (string.indexOf('.') == -1) return string + '.00'; if (dec == 1) return string + '00'; if (dec == 2) return string + '0'; if (dec > 3) return string.substring(0,string.length-dec+3); return string;}function calculate(){ QtyA = 0; QtyB = 0; QtyC = 0; TotA = 0; TotB = 0; TotC = 0; PrcA = 6.50; PrcB = 13.50; PrcC = 31.00; if (document.ofrm.qtyA.value > "") { QtyA = document.ofrm.qtyA.value }; document.ofrm.qtyA.value = eval(QtyA); if (document.ofrm.qtyB.value > "") { QtyB = document.ofrm.qtyB.value }; document.ofrm.qtyB.value = eval(QtyB); if (document.ofrm.qtyC.value > "") { QtyC = document.ofrm.qtyC.value }; document.ofrm.qtyC.value = eval(QtyC); TotA = QtyA * PrcA; document.ofrm.totalA.value = dm(eval(TotA)); TotB = QtyB * PrcB; document.ofrm.totalB.value = dm(eval(TotB)); TotC = QtyC * PrcC; document.ofrm.totalC.value = dm(eval(TotC)); Totamt = eval(TotA) + eval(TotB) + eval(TotC) ; document.ofrm.GrandTotal.value = dm(eval(Totamt)); } function validNum(theForm){ var checkOK = "0123456789.,"; var checkStr = theForm.qtyA.value; var allValid = true; var validGroups = true; var decPoints = 0; var allNum = ""; for (i = 0; i < checkStr.length; i++) { ch = checkStr.charAt(i); for (j = 0; j < checkOK.length; j++) if (ch == checkOK.charAt(j)) break; if (j == checkOK.length) { allValid = false; break; } if (ch == ".") { allNum += "."; decPoints++; } else if (ch == "," && decPoints != 0) { validGroups = false; break; } else if (ch != ",") allNum += ch; } if (!allValid) { alert("Please enter only digit characters in the \"Class A quantity\" field."); theForm.qtyA.focus(); return (false); } if (decPoints > 1 || !validGroups) { alert("Please enter a valid number in the \"Class A quantity\" field."); theForm.qtyA.focus(); return (false); } var checkOK = "0123456789.,"; var checkStr = theForm.qtyB.value; var allValid = true; var validGroups = true; var decPoints = 0; var allNum = ""; for (i = 0; i < checkStr.length; i++) { ch = checkStr.charAt(i); for (j = 0; j < checkOK.length; j++) if (ch == checkOK.charAt(j)) break; if (j == checkOK.length) { allValid = false; break; } if (ch == ".") { allNum += "."; decPoints++; } else if (ch == "," && decPoints != 0) { validGroups = false; break; } else if (ch != ",") allNum += ch; } if (!allValid) { alert("Please enter only digit characters in the \"Class B quantity\" field."); theForm.qtyB.focus(); return (false); } if (decPoints > 1 || !validGroups) { alert("Please enter a valid number in the \"Class B quantity\" field."); theForm.qtyA.focus(); return (false); } var checkOK = "0123456789.,"; var checkStr = theForm.qtyC.value; var allValid = true; var validGroups = true; var decPoints = 0; var allNum = ""; for (i = 0; i < checkStr.length; i++) { ch = checkStr.charAt(i); for (j = 0; j < checkOK.length; j++) if (ch == checkOK.charAt(j)) break; if (j == checkOK.length) { allValid = false; break; } if (ch == ".") { allNum += "."; decPoints++; } else if (ch == "," && decPoints != 0) { validGroups = false; break; } else if (ch != ",") allNum += ch; } if (!allValid) { alert("Please enter only digit characters in the \"Class C quantity\" field."); theForm.qtyC.focus(); return (false); } if (decPoints > 1 || !validGroups) { alert("Please enter a valid number in the \"Class C quantity\" field."); theForm.qtyC.focus(); return (false); } calculate(); return (true);} function Validate(theForm){if (theForm.Name.value == ""){alert("Please enter \"Your Name\" ");theForm.Name.focus();return (false);}if (theForm.Email.value == ""){alert("Please enter \"Your Email\" ");theForm.Email.focus();return (false);}if (theForm.Address.value == ""){alert("Please enter \"Your Address\" field.");theForm.Address.focus();return (false);}if (theForm.Town.value == ""){alert("Please enter \"Your Town\" ");theForm.Town.focus();return (false);}if (theForm.Postalcode.value == ""){alert("Please enter \"Your Postal Code\" ");theForm.Postalcode.focus();return (false);}if (theForm.PhoneNumber.value == ""){alert("Please enter \"Your Phone Number\" ");theForm.PhoneNumber.focus();return (false);} return (true);}//--></script><style type="text/css"> <!-- @import url(cssstyles/stylewonderweeder.css); A{text-decoration:none} --></style></head><body><center><table><tr><td><img src="images/logo.jpg" width="421" height="144" border="0" alt="The original Wonder Weeder" align="left"></td><td><img src="images/headingright.jpg" width="155" height="144" border="0" alt="Wonder Weeder"></td><td></td></tr></table><table><tr><td><center><script src="xaramenu.js" type="text/javascript"></script><script menumaker="" src="graphics/wings.js" type="text/javascript"></script></center></td><td></td></tr></table><p class="heading2">Order Form</p><p class="text">Please make your selections from the following choices:</p><p> </p><p class="text">If you have questions or difficulties with this order page, please contact us (see our Contacts page.)</p><form action="http://www.iserve.co.nz/scripts/formtomail/formproc.php" method="post" enctype="multipart/form-data" onsubmit="return" Validate (this)name="ofrm"> <input type="HIDDEN" name="from" value="onlineorderform@wonderweeder.co.nz"> <input type="hidden" name="recipient" value="info@greenhaus.co.nz"> <input type="HIDDEN" name="subject" value="Order from the online order form"> <input type="HIDDEN" name="thankyou_page" value="http://www.greenhaus.co.nz/wonderweeder/thankyou.html"><p class="text">Please tell us who you are (<font color="#FF0000">red</font> denotes required information):</p><table border="0" cellpadding="0" width="550" id="table1" bgcolor="#59A82B"><tr><td width="340" align="right"><font color="#FF0000">Your Name</font></td><td width="10"> </td><td width="200"><input type="text" name="Name" size="30" tabindex="1"></td></tr><tr><td width="340" align="right"><font color="#FF0000">Your Email</font> (Your confirmation will be sent here):</td><td width="10"> </td><td width="200"><input type="text" name="Email" size="30" tabindex="1"></td></tr><tr><td width="340" align="right"><font color="#FF0000">Address</font></td><td width="10"> </td><td width="200"><input type="text" name="Address" size="30" tabindex="1"></td></tr><tr><td width="340" align="right">Address 2nd line:</td><td width="10"> </td><td width="200"><input type="text" name="Address2" size="30" tabindex="1"></td></tr><tr><td width="340" align="right"><font color="#FF0000">Town:</font></td><td width="10"> </td><td width="200"><input type="text" name="Town" size="30" tabindex="1"></td></tr><tr><td width="340" align="right"><font color="#FF0000">Postal Code:</font></td><td width="10"> </td><td width="200"><input type="text" name="Postalcode" size="30" tabindex="1"></td></tr><tr><td width="340" align="right"><font color="#FF0000">Phone Number:</font></td><td width="10"> </td><td width="200"><input type="text" name="PhoneNumber" size="30" tabindex="1"></td></tr><tr><td width="340" align="right">Other Contact Info:</td><td width="10"> </td><td width="200"><input type="text" name="OtherInfo" size="30" tabindex="1"></td></tr><tr><td width="340" align="right"> </td><td width="10"> </td><td width="200"> </td></tr></table><p class="text">And tell us what you would like:</p><table border="0" cellpadding="0" width="550" id="table2" bgcolor="#59A82B"><tr><td width="250" height="31"><b>Item Description</b></td><td align="center" width="100" height="31"><b>Quantity</b></td><td align="right" height="31" width="60"><b>Price</b></td><td align="right" height="31" width="140"><b>Total</b></td></tr><tr><td width="250">1 weeder - suitable as a gift post free within NZ</td><td align="center" width="100"><input type="text" name="qtyA" size="5" tabindex="5" onchange="calculate()"></td><td align="right" width="60">NZ$6.50</td><td align="right" width="140"><input type="text" name="totalA" size="12" tabindex="99" onchange="calculate()"></td></tr><tr><td width="250">3 weeders without gift packaging post free within NZ</td><td align="center" width="100"><input type="text" name="qtyB" size="5" tabindex="5" onchange="calculate()"></td><td align="right" width="60">NZ$13.50</td><td align="right" width="140"><input type="text" name="totalB" size="12" tabindex="99" onchange="calculate()"></td></tr><tr><td width="250">1 Long weeder (1 metre) NZ $25 plus $6.00 delivery (delivered by courier to NZ addresses only)</td><td align="center" width="100"><input type="text" name="qtyC" size="5" tabindex="5" onchange="calculate()"></td><td align="right" width="60">NZ$31.00</td><td align="right" width="140"><input type="text" name="totalC" size="12" tabindex="99" onchange="calculate()"></td></tr><tr><td width="250"> </td><td align="center" width="100"> </td><td align="right" width="60"> </td><td align="right" width="140"> </td></tr><tr><td width="250"><p align="right"><b>TOTALS:</b></p></td><td align="center" width="100"> </td><td align="right" width="60"> </td><td align="right" width="140"><input type="text" name="GrandTotal" size="15" tabindex="99" onchange="calculate()"></td></tr><tr><td width="250"> </td><td align="center" width="100"> </td><td align="right" width="60"> </td><td align="right" width="140"> </td></tr></table><p> </p><table border="0" cellpadding="0" width="550" id="table3"><tr><td width="563"><p align="center"><input type="submit" value="Submit" name="subButton" tabindex="50"> <input type="reset" value="Reset" name="resetButton" tabindex="50"></p></td></tr></table></form></center></body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted March 10, 2010 Share Posted March 10, 2010 In your form tag, your onsubmit handler is wrong. This:onsubmit="return" Validate (this)should be like this:onsubmit="return Validate (this)" Link to comment Share on other sites More sharing options...
toby_nator Posted March 10, 2010 Author Share Posted March 10, 2010 In your form tag, your onsubmit handler is wrong. This:onsubmit="return" Validate (this)should be like this:onsubmit="return Validate (this)"Thanks "justsomeguy" (who's picture reminded me of my father )That certainly fixed the issue of validating that there is something entered in all the boxes that are marked red.However it still hasn't fully fixed the problem with making sure that the entry into the order boxes is numerical or a full number. Now when I enter a letter into that box, Firebug spits back at me that it can't calculate but I don't get the Please enter only digit characters in the \"Class C quantity\" field. message that I expected when I enter. It also still lets me enter a partial number. I have a suspition that there is no parameter set when to call for the function validNum?The page is usable like it is now, (as I think my customers are bright enough to notice their mistake) but it bugs me now and I really would like it to work as intended.By the way when I was hitting reply on this forum, firebug picked up an error on it as well and I couldn't proceed until I had firebug disabled. Link to comment Share on other sites More sharing options...
boen_robot Posted March 10, 2010 Share Posted March 10, 2010 Errr... you're never actually calling validNum. And I didn't even saw a JavaScript error BTW. I just sent you some pseudo data (with one letter each...) that just got accepted as it was.I must say, even if you do JavaScript validation, you still MUST do server side validation too, one particular reason is exactly to catch cases where JavaScript support may be absent (e.g. some corporations) or poor (e.g. the larger part of mobile phones). Link to comment Share on other sites More sharing options...
toby_nator Posted March 10, 2010 Author Share Posted March 10, 2010 Errr... you're never actually calling validNum. And I didn't even saw a JavaScript error BTW. I just sent you some pseudo data (with one letter each...) that just got accepted as it was.I must say, even if you do JavaScript validation, you still MUST do server side validation too, one particular reason is exactly to catch cases where JavaScript support may be absent (e.g. some corporations) or poor (e.g. the larger part of mobile phones).Thanks boen_robotThat sort of confirms what I suggested the problem was in the post above.I tried a few ways with my limited javascript knowledge to call for validNum, however I don't seem to be able to figure out how and where to place it . Any sugestions please? As for server side validation - at the moment I am struggling enough to figure out javascript and I am happy once I have the form working properly in javascript. My php knowledge is even less and I can't see myself being able to do server side validation at this stage. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.