By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,287 Members | 1,644 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,287 IT Pros & Developers. It's quick & easy.

Is there a way to tidy my JavaScript code?

P: 1
Below is my code and it works fine but is there a way to tidy it somewhat? as I am calling 3 different scripts and would be nice if it would just run through and alert the Radio and Checkbox function in sequence after the form validation - does that make sense?
If not, hey it does the job! :-)
Thanks

Code:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script type="text/javascript"> 
  4. function validateRadio (radios)
  5. {
  6.     for (i = 0; i < radios.length; ++ i)
  7.     {
  8.         if (radios [i].checked) return true;
  9.     }
  10.     return false;
  11. }
  12.  
  13. function validateForm()
  14. {
  15.     if(validateRadio (document.forms["myform"]["CateringNumbers"]))
  16.     {
  17.         return true;
  18.     }
  19.     else
  20.     {
  21.         alert('Choose number');
  22.         return false;
  23.     }
  24. }
  25.  
  26. function checkForm(frm){
  27. var cateringcount = frm.elements['CateringType'].length;
  28. var catering   = false;
  29. for(i = 0; i < cateringcount; i++){
  30. if(frm.elements['CateringType'][i].checked){
  31. catering = true;
  32. break;
  33. }
  34. }
  35. if(!catering){
  36. alert('Choose catering');
  37. }
  38. return catering;
  39. }
  40.  
  41. </script>
  42. </head>
  43. <body>
  44. <form action="../" method="post" onsubmit="return (validateForm() && checkForm(this) && ValidateInForm(this));" 
  45.  
  46. id="myform">
  47.  
  48. <script type="text/javascript">
  49. function ValidateInForm(frm) {
  50. if (frm.Name.value == "") {alert('Please tell us your name.');frm.Name.focus();return false;}
  51. if (frm.Email.value == "") {alert('Please provide us with an email address.');frm.Email.focus();return false;}
  52. if (frm.Email.value.indexOf("@") < 1 || frm.Email.value.indexOf(".") < 1) {alert('Please enter a valid email address.');frm.Email.focus();return false;}
  53. if (frm.Number.value == "") {alert('Please provide us with a contact number.');frm.Number.focus();return false;}
  54. if (frm.Event.value == "") {alert('Type of event is required.');frm.Event.focus();return false;}
  55. if (frm.EventDate.value == "") {alert('Date of event is required.');frm.EventDate.focus();return false;}
  56. if (frm.Ground.value == "") {alert('Please provide an indication of type of ground ie: grass, concrete.');frm.Ground.focus();return false;}
  57. if (frm.CateringTime.value == "") {alert('Please enter times of catering required i.e. 1-3pm.');frm.CateringTime.focus();return false;}
  58. if (frm.CateringNumbers.value == "") {alert('Please tell us the type of catering you require.');frm.CateringNumbers.focus();return false;}
  59.  
  60. return true; }
  61.  
  62. </script>
  63.  
  64.  
  65.               <p align="left"><font face="Arial, Helvetica, sans-serif" color="orange">Contact Name: 
  66.                             <input type="text" name="Name" value="" size="30" />
  67.                             </font> </p><p align="left"><font face="Arial, Helvetica, sans-serif" color="orange">Email: 
  68.                             <input type="text" name="Email" value="" size="50" />
  69.                             </font> </p><p align="left"><font face="Arial, Helvetica, sans-serif" color="orange">Telephone Number: 
  70.                             <input type="text" name="Number" value="" size="30" />
  71.                             </font> </p><p align="left"><font face="Arial, Helvetica, sans-serif" color="orange">Event: 
  72.                             <input type="text" name="Event" value="" size="50" />
  73.                             </font> </p>
  74.                           <p align="left"><font face="Arial, Helvetica, sans-serif" color="orange">Event: 
  75.                             <input type="text" name="EventDate" value="" size="20" />
  76.                             </font> </p>
  77. <p align="left"><font face="Arial, Helvetica, sans-serif" color="orange">Type of Ground: 
  78.                             <input type="text" name="Ground" value="" size="40" />
  79.                             </font> </p>
  80.                           <p align="left"><font face="Arial, Helvetica, sans-serif" color="orange">Time: 
  81.                             <input type="text" name="CateringTime" value="" size="40" />
  82.                             </font> </p>
  83.               <p align="left"><font face="Arial, Helvetica, sans-serif" color="orange">Numbers:<br><br> 
  84.                             <input type="radio" name="CateringNumbers" value="0-25">0-25 
  85.                 <input type="radio" name="CateringNumbers" Value="26-50">26-50 
  86.                 <input type="radio" name="CateringNumbers" Value="51-100">51-100 
  87.                  <input type="radio" name="CateringNumbers" Value="101-250">101-250 
  88.                 <input type="radio" name="CateringNumbers" Value="Other">Other, please specify <input type="text" name="CateringNumbersOther" Value="" size="30" />
  89.                             </font> </p>
  90.                <p align="left"><font face="Arial, Helvetica, sans-serif" align="left" color="orange">Catering:<br><br>
  91.                             <input type="checkbox" name="CateringType" value="1">1<br>
  92.                 <input type="checkbox" name="CateringType" Value="2">2<br>
  93.                 <input type="checkbox" name="CateringType" Value="3">3<br> 
  94.                  <input type="checkbox" name="CateringType" Value="4">4<br>
  95.                             <input type="checkbox" name="CateringType" Value="5">5<br>
  96.                 <input type="checkbox" name="CateringType" Value="6">6<br>
  97.               </font> </p>
  98.  
  99.  
  100.                         <p align="left"><font face="Arial, Helvetica, sans-serif" align="left" color="orange"> 
  101.                             <input type="submit" value="Submit">
  102.                             </font> </p>
  103. </form>
  104. </body>
  105. </html>
Nov 15 '12 #1
Share this Question
Share on Google+
1 Reply


acoder
Expert Mod 15k+
P: 16,027
You can combine all 3 validation functions.

Line 58 is not needed.

Add proper indentation.

Move all JavaScript to the head or, even better, to a separate JavaScript file.

HTML: don't use the font tag - use CSS instead for styling.

etc.
Nov 22 '12 #2

Post your reply

Sign in to post your reply or Sign up for a free account.