JavaScript Forum

**NickH** · 09-16-2010, 08:13 AM

hey all,

looking for some help with javascript and validating a form.
so what im trying to do is ive got a form and when the user clicks submit if fields aren't filled in an alert will pop up that asks the user to fill in the remaining fields.

im having a few problems with this, mainly that the alert wont pop up so if any one is willing to have a look at the code and then let me know where im going wrong that would be excellent.

HTML

Code:

<!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>
        <!--- Created by Nick Hayden (29/07/2010) -->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Little Bean Order Form</title>
        <script type="text/javascript" src="../javascript/script.js" ></script>
    <style type="text/css">
        body 
        {
            background-color:#FF6600;
            font-family:Verdana, Arial, Helvetica, sans-serif;
            font-size:12pt;
        }
        
    </style>
    </head>
    <body>
        
    <table border="0" width="960" align="center">

    <tr>

    <td colspan="2"> <a href="../homepage.html"> <img src="../images/coffeebeans.jpg" alt="Coffee Shop Header" 
                     height="100" width="960" /></a> </td>

    </tr>
    
    <tr>

    <td valign="top" align="center" style="width:150px;">
                <p>
                    <img src="../images/coffee-bean.png" alt="Coffee Bean Navigation Image" width="50" />    
                        <br />
                        <a href="../homepage.html">Home</a>
                        <br /><br />
                        <img src="../images/coffee-bean.png" alt="Coffee Bean Navigation Image" width="50" />
                        <br />
                        <a href="../html/coffee.html">Coffee</a>                        
                        <br /><br />
                        <img src="../images/coffee-bean.png" alt="Coffee Bean Navigation Image" width="50" />
                        <br />
                        <a href="../html/menu.html">Menu</a>
                        <br /><br />
                </p></td>

    <td valign="top">
    <h1 align="center" style="color:#CC3300">Order Form</h1>
    
    <hr /> 
        
    <form align="justify" name="order">    
        <p>
        First Name:
        <input type="text" name="fname" onfocus="fname()"/>
        Last Name:
        <input type="text" name="lname" value=""/><br /><br />
        Address:
        <input type="text" name="address" value="" />
        Suburb:
        <input type="text" name="suburb" value="" /><br /><br />
        State
        <select name="state">
            <option>Please select your State</option>
            <option>Australian Capital Territory (ACT)</option>
            <option>New South Wales (NSW)</option>
            <option>Northern Territory (NT)</option>
            <option>Queensland (QLD)</option>
            <option>South Australia (SA)</option>
            <option>Tasmania (TAS)</option>
            <option>Victoria (VIC)</option>
            <option>Western Australia (WA)</option>
        </select>
        Postcode: 
        <input type="text" name="postcode" value="" /><br /><br />
        Email:
        <input type="text" name="email" value="" />
        Phone Number:
        <input type="text" name="phone" value="" /><br /><br />
        <hr />
        Order:<br />
        <textarea rows="10" cols="70" name="order" value="" ></textarea>
        <br /><br />
        <hr />
        Select Payment:<br />
        <input type="radio" name="payment" value="credit" /> Credit Card<br />
        <input type="radio" name="payment" value="paypal" /> Paypal <br />
        <input type="radio" name="payment" value="bank" /> Online Baking <br />
        <hr />
        
        <input type="submit" value="Submit Order" name="submit" onclick="fname()" />
        <input type="reset" value="Reset Form" name="cancel" />
        
    </form>
     
    <div style="text-align:center; font-size:10pt;">
    <p><a href="../html/contact.html">Contact Us</a> | <a href="../html/copyright.html">Copyright</a> | <a href="../html/privacy.html">Privacy</a> | <a href="mailto:nickhayden1992@gmail.com">Web Administrator</a></p>
        
    </div>
    </td>

    </tr>
    
    </table>

        
    </body>
</html>

Javascript

Code:

    function fname()
        {
             (document.form.order.input.fname=="");
                {
                    alert("Please Enter Your Name");
                }
        }

thanks for any reply

**NickH** · 09-17-2010, 08:47 AM

alright so i've fixed my code that now lets me validate the fields to check if they have some text inside them now i have another problem,

how do i allow only numbers into a text field?

Code:

 <!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>
        <!--- Created by Nick Hayden (29/07/2010) -->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Little Bean Order Form</title>
        <script language="javascript" src="../javascript/script.js" ></script>
    <style type="text/css">
        body 
        {
            background-color:#FF6600;
            font-family:Verdana, Arial, Helvetica, sans-serif;
            font-size:12pt;
        }
        
    </style>
    </head>
    <body>
        
    <table border="0" width="960" align="center">

    <tr>

    <td colspan="2"> <a href="../homepage.html"> <img src="../images/coffeebeans.jpg" alt="Coffee Shop Header" 
                     height="100" width="960" /></a> </td>

    </tr>
    
    <tr>

    <td valign="top" align="center" style="width:150px;">
                <p>
                    <img src="../images/coffee-bean.png" alt="Coffee Bean Navigation Image" width="50" />    
                        <br />
                        <a href="../homepage.html">Home</a>
                        <br /><br />
                        <img src="../images/coffee-bean.png" alt="Coffee Bean Navigation Image" width="50" />
                        <br />
                        <a href="../html/coffee.html">Coffee</a>                        
                        <br /><br />
                        <img src="../images/coffee-bean.png" alt="Coffee Bean Navigation Image" width="50" />
                        <br />
                        <a href="../html/menu.html">Menu</a>
                        <br /><br />
                </p></td>

    <td valign="top">
    <h1 align="center" style="color:#CC3300">Order Form</h1>
    
    <hr /> 
        
    <form align="justify" name="orderform" id="order" onSubmit="return checkform(this)">    
        <p>
        First Name:
        <input type="text" name="fname" />
        Last Name:
        <input type="text" name="lname" value=""/><br /><br />
        Address:
        <input type="text" name="address" value="" />
        Suburb:
        <input type="text" name="suburb" value="" /><br /><br />
        State
        <select name="state">
            <option>Please select your State</option>
            <option>Australian Capital Territory (ACT)</option>
            <option>New South Wales (NSW)</option>
            <option>Northern Territory (NT)</option>
            <option>Queensland (QLD)</option>
            <option>South Australia (SA)</option>
            <option>Tasmania (TAS)</option>
            <option>Victoria (VIC)</option>
            <option>Western Australia (WA)</option>
        </select>
        Postcode: 
        <input type="text" name="postcode" value="" /><br /><br />
        Email:
        <input type="text" name="email" value="" />
        Phone Number:
        <input type="text" name="phone" value="" /><br /><br />
        <hr />
        Order:<br />
        <textarea rows="10" cols="70" name="order" value="" ></textarea>
        <br /><br />
        <hr />
        Select Payment:<br />
        <input type="radio" name="payment" value="credit" /> Credit Card<br />
        <input type="radio" name="payment" value="paypal" /> Paypal <br />
        <input type="radio" name="payment" value="bank" /> Online Baking <br />
        <hr />
        
        <input type="submit" value="Submit Order" name="submit" />
        <input type="reset" value="Reset Form" name="cancel" />
        
    </form>
     
    <div style="text-align:center; font-size:10pt;">
    <p><a href="../html/contact.html">Contact Us</a> | <a href="../html/copyright.html">Copyright</a> | <a href="../html/privacy.html">Privacy</a> | <a href="mailto:nickhayden1992@gmail.com">Web Administrator</a></p>
        
    </div>
    </td>

    </tr>
    
    </table>

        
    </body>
</html>

Code:

 

    function checkform ( form )
        {
            if (form.fname.value == "") 
                {
                    alert ( "Please Enter Your First Name." );
                    form.fname.focus();
                    return false;
                }
            
            if (form.lname.value == "")
                {
                    alert ( "Please enter your Last Name." ); 
                    form.lname.focus(); 
                    return false; 
                }
                
            if (form.address.value == "") 
                {
                    alert ( "Please enter your Address." ); 
                    form.address.focus();
                    return false; 
                }
                
            if (form.suburb.value == "")
                {
                    alert ( "Please enter your Suburb." ); 
                    form.suburb.focus(); 
                    return false; 
                }
                
            if (form.state.value == "Please select your State" ) 
                {
                    alert ( "Please choose your State" ); 
                    form.state.focus(); 
                    return false; 
                }
            
            if (form.postcode.value == "" )
                {
                    alert ("Please enter your Postcode" );
                    form.postcode.focus();
                    return false; 
                }
            
            if (form.email.value == "")
                {
                    alert ("Please enter your Email" ); 
                    form.email.focus(); 
                    return false; 
                }
                
            if (form.phone.value == "")
                {
                    alert ("Please enter your Phonenumber" ); 
                    form.phone.focus(); 
                    return false; 
                }
            
            if (form.order.value == "") 
                {
                    alert ( "Please enter your Order" );
                    form.order.focus(); 
                    return false; 
                }
        
        return true;        
        }

**smoseley** · 09-17-2010, 09:04 AM

if (isNaN(value)) {
return false;
}

**NickH** · 09-17-2010, 09:59 AM

hey mate, thanks for the reply but im still having a bit of trouble with it at the moment the code looks like

Code:

if (form.postcode.value == "" )
                {
                    alert ("Please enter your Postcode" );
                    form.postcode.focus();
                    return false; 
                }
                
                if (form.postcode.value == isNaN(value)) 
                    {
                    alert ("Please enter only numbers"); 
                    form.postcode.focus();
                    return false;
                    }

and yeah im just struggling with how to make it only numbers going into the field

**NickH** · 09-17-2010, 10:34 AM

so after some further fiddling around i've got it so that if there are letters in the field then an alert pops up but im still looking to get only numbers entered into the field

Code:

 if (form.postcode.value = isNaN()) 
                    {
                    alert ("Please enter only numbers"); 
                    form.postcode.focus();
                    return false;
                    }