Is there a way to tidy my JavaScript code?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • horseridingjo
    New Member
    • Nov 2012
    • 1

    #1

    Is there a way to tidy my JavaScript code?

    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:
    Code:
    <html>
    <head>
    <script type="text/javascript"> 
    function validateRadio (radios)
    {
        for (i = 0; i < radios.length; ++ i)
        {
            if (radios [i].checked) return true;
        }
        return false;
    }
     
    function validateForm()
    {
        if(validateRadio (document.forms["myform"]["CateringNumbers"]))
        {
            return true;
        }
        else
        {
            alert('Choose number');
            return false;
        }
    }
    
    function checkForm(frm){
    var cateringcount = frm.elements['CateringType'].length;
    var catering   = false;
    for(i = 0; i < cateringcount; i++){
    if(frm.elements['CateringType'][i].checked){
    catering = true;
    break;
    }
    }
    if(!catering){
    alert('Choose catering');
    }
    return catering;
    }
     
    </script>
    </head>
    <body>
    <form action="../" method="post" onsubmit="return (validateForm() && checkForm(this) && ValidateInForm(this));" 
    
    id="myform">
    
    <script type="text/javascript">
    function ValidateInForm(frm) {
    if (frm.Name.value == "") {alert('Please tell us your name.');frm.Name.focus();return false;}
    if (frm.Email.value == "") {alert('Please provide us with an email address.');frm.Email.focus();return false;}
    if (frm.Email.value.indexOf("@") < 1 || frm.Email.value.indexOf(".") < 1) {alert('Please enter a valid email address.');frm.Email.focus();return false;}
    if (frm.Number.value == "") {alert('Please provide us with a contact number.');frm.Number.focus();return false;}
    if (frm.Event.value == "") {alert('Type of event is required.');frm.Event.focus();return false;}
    if (frm.EventDate.value == "") {alert('Date of event is required.');frm.EventDate.focus();return false;}
    if (frm.Ground.value == "") {alert('Please provide an indication of type of ground ie: grass, concrete.');frm.Ground.focus();return false;}
    if (frm.CateringTime.value == "") {alert('Please enter times of catering required i.e. 1-3pm.');frm.CateringTime.focus();return false;}
    if (frm.CateringNumbers.value == "") {alert('Please tell us the type of catering you require.');frm.CateringNumbers.focus();return false;}
    
    return true; }
    
    </script>
    
    
    			  <p align="left"><font face="Arial, Helvetica, sans-serif" color="orange">Contact Name: 
                                <input type="text" name="Name" value="" size="30" />
                                </font> </p><p align="left"><font face="Arial, Helvetica, sans-serif" color="orange">Email: 
                                <input type="text" name="Email" value="" size="50" />
                                </font> </p><p align="left"><font face="Arial, Helvetica, sans-serif" color="orange">Telephone Number: 
                                <input type="text" name="Number" value="" size="30" />
                                </font> </p><p align="left"><font face="Arial, Helvetica, sans-serif" color="orange">Event: 
                                <input type="text" name="Event" value="" size="50" />
                                </font> </p>
                              <p align="left"><font face="Arial, Helvetica, sans-serif" color="orange">Event: 
                                <input type="text" name="EventDate" value="" size="20" />
                                </font> </p>
    <p align="left"><font face="Arial, Helvetica, sans-serif" color="orange">Type of Ground: 
                                <input type="text" name="Ground" value="" size="40" />
                                </font> </p>
                              <p align="left"><font face="Arial, Helvetica, sans-serif" color="orange">Time: 
                                <input type="text" name="CateringTime" value="" size="40" />
                                </font> </p>
    			  <p align="left"><font face="Arial, Helvetica, sans-serif" color="orange">Numbers:<br><br> 
                                <input type="radio" name="CateringNumbers" value="0-25">0-25 
    			    <input type="radio" name="CateringNumbers" Value="26-50">26-50 
    			    <input type="radio" name="CateringNumbers" Value="51-100">51-100 
     			    <input type="radio" name="CateringNumbers" Value="101-250">101-250 
    			    <input type="radio" name="CateringNumbers" Value="Other">Other, please specify <input type="text" name="CateringNumbersOther" Value="" size="30" />
                                </font> </p>
    			   <p align="left"><font face="Arial, Helvetica, sans-serif" align="left" color="orange">Catering:<br><br>
                                <input type="checkbox" name="CateringType" value="1">1<br>
    			    <input type="checkbox" name="CateringType" Value="2">2<br>
    			    <input type="checkbox" name="CateringType" Value="3">3<br> 
     			    <input type="checkbox" name="CateringType" Value="4">4<br>
                                <input type="checkbox" name="CateringType" Value="5">5<br>
    			    <input type="checkbox" name="CateringType" Value="6">6<br>
    			  </font> </p>
    
    
                            <p align="left"><font face="Arial, Helvetica, sans-serif" align="left" color="orange"> 
                                <input type="submit" value="Submit">
                                </font> </p>
    </form>
    </body>
    </html>
    Last edited by zmbd; Nov 15 '12, 02:22 PM. Reason: [Z{Please use the <CODE/> button in the toolbar to format posted code}]
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    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.

    Comment

    Working...