JavaScript Forum

**NickH** · 09-20-2010, 12:08 AM

hey all, ive got a form which ive posted about in another thread here but now i need some help with how to make an extension of the form
the plan is that when the user selects an option with a radio button it opens up a div with details about the type of payment

example: when they click on the radio button "credit card" the credit layer appears below and allows them to enter the credit card details

same thing with a paypal button and a direct deposit button.

heres what ive got so far but i cant figure out how to make the div open within the html page (perhaps an array?) so yeah any tips on how to do it even if you dont have a solution im happy to try it out

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 language="javascript" src="../javascript/script.js" ></script>
        <link href="../stylesheet/coffee.css" rel="stylesheet" type="text/css" >
    <style type="text/css">
        body 
        {
            background-color:#FF6600;
            font-family:Verdana, Arial, Helvetica, sans-serif;
            font-size:12pt;
        }
        
    </style>
    </head>
    <body>
     <div id="header"><a href="../homepage.html"> <img src="../images/coffeebeans.jpg" alt="Coffee Shop Header" 
                     height="100" width="960" /></a></div>

                <div id="navigation"><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></div>

    <div id="content">
    <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=""  maxlength="4"/><br /><br />
        Email:
        <input type="text" name="email" value="" />
        Phone Number:
        <input type="text" name="phone" value="" maxlength="10" /><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" onclick="cclayer()"/> 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>
    <div id="footer">
    <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>

        
    </body>
</html>

javascript

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.postcode.value = isNaN()) 
                    {
                    alert ("Please enter only numbers for your Postcode"); 
                    form.postcode.focus();
                    return false;
                    }
                        else 
                            {
                                return true;
                            }*/
                
            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.phone.value = isNaN()) 
                    {
                    alert ("Please enter only numbers for your Phonenumber"); 
                    form.phone.focus();
                    return false;
                    }
            
            if (form.order.value == "") 
                {
                    alert ( "Please enter your Order" );
                    form.order.focus(); 
                    return false; 
                }
        
        return true;        
        }
        
        function cclayer()    
            {
                document.write('<link href="../stylesheet/coffee.css" rel="stylesheet" type="text/css" / ><div id="footer"><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>')
            }

css

Code:

    body 
        {
            background-color:#FF6600;
            font-family:Arial, Helvetica, sans-serif;
            font-size:12pt;
            color:#282828;
        }
        
    h1
        {
            text-align:center;
            color:#CC3300;
        }
    
    p
        {
            font-family:Verdana, Arial, Helvetica, sans-serif;
            font-size:12pt;
            color:#282828;
        }
    
    p.content:first-letter
        {
            font-size:14pt;
            font-style:italic;
        }
        
    a
        {
            color:#336666;
            text-decoration:underline;
        }
    
    a:visited 
        {
            color:#274828;
            text-decoration:underline;
        }
    
    a:hover
        {
            color:#006600;
            text-decoration:none;
        }
    
    a:active
        {
            color:#003300;
        }

    #header 
        {
            width:960px;
            height:100px;
        }
    
    #content
        {
            width:810px;
            vertical-align:top;
            position:relative;
            margin:-270px 0px 0px 150px;
        }
    
    #navigation
        {
            width:150px;
            vertical-align:top;
            text-align:center;
            margin-top:50px;
        }
    
    #footer
        {
            text-align:center; 
            font-size:10pt;
        }
    
    div#navigation a span
        {
            display:none;
        }
    
    div#navigation a:hover span
        {    
            display:block;
            position:absolute;
            margin:170px 0px 0px 10px;
            font-size:12pt;
            color:#282828;
        }
    
    #cclayer
        {
            
        }

**chrishirst** · 09-20-2010, 11:19 AM

http://www.webmaster-talk.com/javasc...d-new-box.html

Quote:

how to make the div open within the html page

Means what exactly??

**smoseley** · 09-20-2010, 11:35 AM

I'm not sure where you're going with this... looks like the contents of your div are your website footer? I assume that's just for testing?

If you're looking to have new fields in your form conditional upon the selection of a radio button, you'll want to create that div in your HTML, with style="display:none", and then have your cclayer() function toggle it, e.g. document.getElementById("ccLayer").style.display = "block"

**NickH** · 09-20-2010, 09:32 PM

thanks heaps smoseley i think i know where to go with it now

and just so you guys know what im talking about

When the user selects a payment option a positioned layer must be loaded displaying the payment options as follows:

- Click here for an example of the Credit Card Layer.
- Click here for an example of the Paypal Layer.
- Click here for an example of the Direct Deposit Layer.

**chrishirst** · 09-21-2010, 04:59 PM

So basically a tabbed interface then.

**NickH** · 09-22-2010, 03:01 AM

while your in a helping mood chris i might ask for some more advice

in the same form im trying to make it so in the postcode and phonenumber fields can only have numbers entered into them

ive been trying to use isNaN() but i dont think its right for the job, is there some other kind of way to check numbers

and on a similar note, is there an expression to check for symbols such as @ and .

that i could use in the email field some like

if (form.email.value != . && @)
{code to be executed
}

i know thats not the right code but hopefully you can understand what i mean

**chrishirst** · 09-22-2010, 06:01 AM

There is a javascript email validation function at http://www.w3schools.com/js/js_form_validation.asp

postcode validation depends on the country you need it for.

phone number format validation

**NickH** · 09-22-2010, 06:46 AM

ive given the w3schools email validation a shot but it wants its own function and when i try to use it i cant have onsubmit twice in the form and when i tried to add it into the entire validation function it wont work at all

**chrishirst** · 09-24-2010, 05:30 PM

Use the onblur event to check when the element looses focus.

**NickH** · 09-26-2010, 05:14 AM

thanks for the help, didnt work but it was worth a shot

**chrishirst** · 09-26-2010, 09:17 AM

can we see the code you set up?

**NickH** · 09-27-2010, 12:52 PM

yes you can

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>
        <link href="../stylesheet/coffee.css" rel="stylesheet" type="text/css" >
    <style type="text/css">
        body 
        {
            background-color:#FF6600;
            font-family:Verdana, Arial, Helvetica, sans-serif;
            font-size:12pt;
        }
        
    </style>
    </head>
    <body>
     <div id="header"><a href="../homepage.html"> <img src="../images/coffeebeans.jpg" alt="Coffee Shop Header" 
                     height="100" width="960" /></a></div>

                <div id="navigation"><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 />            
                        <img src="../images/coffee-bean.png" alt="Coffee Bean Navigation Image" width="50" /><br />
                        <a href="order.html">Order</a>
                </p></div>

    <div id="content">
    <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=""  maxlength="4" onkeypress="return isNumberKey(event)"/><br /><br />
        Email:
        <input type="text" name="email" value=""  onblur="return function validate_email(this)" />
        Phone Number:
        <input type="text" name="phone" value="" maxlength="10" onkeypress="return isNumberKey(event)" /><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" onclick="cclayer()" /> Credit Card<br />
        <input type="radio" name="payment" value="paypal" onclick="pplayer()" /> Paypal <br />
        <input type="radio" name="payment" value="bank" onclick="ddlayer()" /> Direct Deposit <br />
        <hr />
        <div id="cclayer">
    <img src="../images/CreditCardLogos.jpg" alt="logo's of Visa, Mastercard and American Express" /><br /><br />
    Type of Credit Card: 
    <select name="cctype">
        <option>Please select your Credit Card type</option>
        <option>Visa</option>
        <option>Mastercard</option>
        <option>American Express</option>
    </select><br /><br />
    Name on Card: 
    <input type="text" name="cname" value="" /><br /><br />
    Card Number:  
    <input type="number" name="cnum" value="" /><br /><br />
    Expiry Date: 
    <select name="expmonth">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
    </select>
    <select name="expyear">
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
    </select><hr /><br /><br />
    </div>
    <div id="pplayer">
        <a href="http://www.paypal.com"><img src="../images/paypal.jpg" alt="Paypal's Buy Now button" /></a><br />
        <hr /><br /><br />
    </div>
    <div id="ddlayer">
        <b>Account Name:</b> Little Bean Coffee Shop<br /><br />
        <b>Bank:</b> ANZ<br /><br />
        <b>BSB:</b> 285-972<br /><br />
        <b>Account Number:</b> 560254-2892-160725<br /><br />
        Please use the reference number given
        <hr /><br /><br />
        
    </div>

        
        <input type="submit" value="Submit Order" name="submit" />
        <input type="reset" value="Reset Form" name="cancel" />
        <input type="button" value="Help" name="help" onclick="open_win()" />
        
    </form>
     </div>
    <div id="footer">
    <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>

        
    </body>
</html>

Code:


//the basic function for the entire form validation process
//all the fields have "form.field.focus();" after each alert, this means that the browser focuses on the required field to make it easier for the user to find what they have missed

    function checkform ( form )
    
    //all the if statements below this comment are for each individual field within the form - the if statements check that the value of each field is not blank
    //first name
        {
            if (form.fname.value == "") 
                {
                    alert ( "Please Enter Your First Name." );
                    form.fname.focus();
                    return false;
                }
            // last name
            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; 
                }
                //address
            if (form.suburb.value == "")
                {
                    alert ( "Please enter your Suburb." ); 
                    form.suburb.focus(); 
                    return false; 
                }
                //state (the field "state" is a select (drop down box) so the blank value is set to "Please select your State" which is the default value of the field
            if (form.state.value == "Please select your State" ) 
                {
                    alert ( "Please choose your State" ); 
                    form.state.focus(); 
                    return false; 
                }
            //postcode
            if (form.postcode.value == "" )
                {
                    alert ("Please enter your Postcode" );
                    form.postcode.focus();
                    return false; 
                }
                
                
                    

                //email field
            if (form.email.value == "")
                {
                    alert ("Please enter your Email" ); 
                    form.email.focus(); 
                    return false; 
                }
                
                
function validate_form(thisform)
{
with (thisform)
  {
  if (validate_email(email,"Not a valid e-mail address!")==false)
    {email.focus();return false;}
  }
                
                //phone number field
            if (form.phone.value == "")
                {
                    alert ("Please enter your Phonenumber" ); 
                    form.phone.focus(); 
                    return false; 
                }
                //this statement is similar to the postcode field in that it makes sure the value is a number
                    if (form.phone.value = isNaN()) 
                    {
                    alert ("Please enter only numbers for your Phonenumber"); 
                    form.phone.focus();
                    return false;
                    }
            //order field
            if (form.order.value == "") 
                {
                    alert ( "Please enter your Order" );
                    form.order.focus(); 
                    return false; 
                }
            
        //if none of the above fields have any problems then the statement returns true and the form can be sent to the server for further validation
        return true;        
        }
        //all 3 of the below functions set the display attributes of their respective divs to "block" while hiding all of the other layers 
        //this was done so that the user doesnt click on one radio button then change their answer only to have the previous payments details remain on the 
        //screen
        
        //the function for the Credit Card Layer (cclayer) to display when the radio button for Credit Card payment is selected
        function cclayer()    
            {
                document.getElementById("cclayer").style.display = "block"
                document.getElementById("pplayer").style.display = "none"
                document.getElementById("ddlayer").style.display = "none"
            }
        
        //the function for the Paypal Layer (pplayer) to display when the radio button for Paypal is selected, this layer is a buy now button rather than user input
        function pplayer()
            {
                document.getElementById("pplayer").style.display = "block"
                document.getElementById("cclayer").style.display = "none"
                document.getElementById("ddlayer").style.display = "none"
            }
            
            //the function for the direct deposit layer (ddlayer) to display when the radio button for Direct Deposit is selected
        function ddlayer()
            {
                document.getElementById("ddlayer").style.display = "block"
                document.getElementById("cclayer").style.display = "none"
                document.getElementById("pplayer").style.display = "none"
            }
            //the function for opening the help page in a new tab/window (depending on the users preferences)                                                            
        function open_win()
            {
                window.open("help.html")
            }
            
            //because we only want numbers entered into the postcode field this if statement is used to make sure that if the value is not a number do not let it 
                //validate
            function isNumberKey(evt)
                          {
                             var charCode = (evt.which) ? evt.which : event.keyCode
                                 if (charCode > 31 && (charCode < 48 || charCode > 57))
                            return false;

                         return true;
                         }
                         
        function validate_email(field,alerttxt)
{
with (field)
  {
  apos=value.indexOf("@");
  dotpos=value.lastIndexOf(".");
  if (apos<1||dotpos-apos<2)
    {alert(alerttxt);return false;}
  else {return true;}
  }
}
        }