Sign in to follow this  
markg

createing a form using javascript

Recommended Posts

I was just wondering if anybody could help me. I am a little stuck on this form that I have been working on for a school project.The problem is that when I try to get the form to check if the password confermation is the same as the password, if it is not the same then a message will display that it is not the same password and to try again. the form works up the that point where you would have to input a password. I looked at the code in the .js file and in the html file, and every thing seems to be ok I don't spot any errors. The only browser that the password check works in is (IE), it dosen't work in opera or firefox. does anyone have any Ideas of can anyone spot any errors that I over looked? Here's the code for the .js file and the html file. Start code .js file function validate(form){ var result = true; if(result == true){ result = validateBillingAddress(form); } if(result == true){ result = validateShippingAddress(form); } if(result == true){ result = validatePhone(form); } if(result == true){ result = validatePassword(form); } if(result == true){ result = validateRate(form); } return result; } function validateBillingAddress(form){ var myname = document.getElementById("billingName"); var myaddress = document.getElementById("billingAddress"); var mycity = document.getElementById("billingCity") var mystate = document.getElementById("billingState"); var myzip = document.getElementById("billingZip"); var name = myname.value.search(/^[A-Z][a-z]+, ?[A-Z][a-z]+, ?[A-Z]\.?$/); var address = myaddress.value.search(/\d+\s\w\.\d+\w+\w+/); var city = mycity.value.search(/[A-Z][a-z]/); var state = mystate.value.search(/\w{2}/); var zip = myzip.value.search(/\d{5}/); if(form.billingName.value == "" || name != 0){ alert("You need to fill in your full name") myname.focus(); myname.select(); return false; } if(form.billingAddress.value == "" || address != 0){ alert("You need to fill in your address completely"); myaddress.focus(); myaddress.select(); return false; } if(form.billingCity.value == "" || city != 0){ alert("You need to fill the name of the city you live in"); mycity.focus(); mycity.select(); return false; } if(form.billingState.value == "" || state != 0){ alert("you need to fill the abrivated name of your state"); mystate.focus(); mystate.select(); return false; } if(form.billingZip.value == "" || zip != 0){ alert("you need to fill in your 5 digit zip code"); myzip.focus(); myzip.select(); return false; } return true; } function validateShippingAddress(form){ var myShippingName = document.getElementById("shippingName"); var myShippingAddress = document.getElementById("shippingAddress"); var myShippingCity = document.getElementById("shippingCity") var myShippingState = document.getElementById("shippingState"); var myShippingZip = document.getElementById("shippingZip"); var shipName = myShippingName.value.search(/^[A-Z][a-z]+, ?[A-Z][a-z]+, ?[A-Z]\.?$/); var shipAddress = myShippingAddress.value.search(/\d+\s\w\.\d+\w+\w+/); var shipCity = myShippingCity.value.search(/[A-Z][a-z]/); var shipState = myShippingState.value.search(/\w{2}/); var shipZip = myShippingZip.value.search(/\d{5}/); if( shipName != 0){ alert("The name field is different form the billing name. " + "Please correct this field"); myShippingName.focus(); myShippingName.select(); return false; } if(shipAddress != 0){ alert("The name field is different form the billing address. " + "Please correct this field"); myShippingAddress.focus(); myShippingAddress.select(); return false; } if(shipCity != 0){ alert("The name field is different form the billing city. " + "Please correct this field"); myShippingCity.focus(); myShippingCity.select(); return false; } if( shipState != 0){ alert("The name field is different form the billing state. " + "Please correct this field"); myShippingState.focus(); myShippingState.select(); return false; } if(shipZip != 0){ alert("The name field is different form the billing zip. " + "Please correct this field"); myShippingZip.focus(); myShippingZip.select(); return false; } return true; } function validatePhone(form){ var areaCode = document.getElementById("billingAreaCode"); var number1 = document.getElementById("billingPhoneDigit3"); var number2 = document.getElementById("billingPhoneDigit4"); var area = areaCode.value.search(/\d{3}/); var firstnumber = number1.value.search(/\d{3}/); var secondnumber = number2.value.search(/\d{4}/); if(form.billingAreaCode.value == "" || area != 0){ alert(" You need to input the 3 digits of you area code"); areaCode.focus(); areaCode.select(); return false; } if( form.billingPhoneDigit3.value == "" || firstnumber != 0){ alert(" You need to input the first 3 digits of your phone number"); number1.focus(); number1.select(); return false; } if(form.billingPhoneDigit4.value == "" || secondnumber != 0){ alert(" You need to input the last 4 digits of your phone number"); number2.focus(); number2.select(); return false; } return true; } function validatePassword(form){ var password = document.getElementById("billingPassword"); var conferm = document.getElementById("billingPasswordConferm"); if(password.value == ""){ alert(" You haven't typed in a password" + " Please type in a password"); password.focus(); password.select(); return false; } if(conferm.value == "" ){ alert(" You need to conferm you password by retyping in your password" + "Please retype in your password to conferm"); conferm.focus(); password.select(); return false; } if(password.value != conferm.value){ alert(" the two passwords do not match.Please try again"); password.focus(); password.select(); return false; } return true; } function validateRate(form){ var i; for( i = 0; i < form.rate.length; i++){ if(form.rate[i].checked){ alert("Your monthly billing rate is: " + form.rate[i].value); } } } function validateBillingCycle(form){ } function copyBillingToShipping(form){ if(form.copy.checked){ form.shippingName.value = form.billingName.value; form.shippingAddress.value = form.billingAddress.value; form.shippingCity.value = form.billingCity.value; form.shippingState.value = form.billingState.value; form.shippingZip.value = form.billingZip.value; }else{ form.shippingName.value=""; form.shippingAddress.value=""; form.shippingCity.value=""; form.shippingState.value=""; form.shippingZip.value=""; } } function sundayRate(form){ if(form.sundayCheckbox.checked){ alert("sundaycheckBox"); } } // End of .js file // Start of html file <?xml version = "1.0" encoding = "utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>NewsPaper Order Form</title> <link type="text/css" rel="stylesheet" href="order.css" /> <script type="text/javascript" src="order.js"> </script> </head> <body> <div id="firstdiv"> <h2 id="text">NewsPaper Order Form <form name="form" action=""> <div class="border" > <div class="shipping">

Shipping


<label> Name <br /> <input type="text" id="shippingName" size="40" /> </label> <br /> <label> Address <br /> <input type="text" id="shippingAddress" size="40" /> </label> <br /> <label> City, State, Zip <br /> <input type="text" id="shippingCity" size="30" /> <input type="text" id="shippingState" size="2" /> <input type="text" id="shippingZip" size="4" /> </label>
<div class="billing" >

Billing


<label> Name (Last, First, Middle Initial) <br /> <input type="text" id="billingName" size="40" /> </label> <br /> <label> Address <br /> <input type="text" id="billingAddress" size="40" /> </label> <br /> <label> City, State, Zip <br /> <input type="text" id="billingCity" size="30" /> <input type="text" id="billingState" size="2" /> <input type="text" id="billingZip" size="4" /> </label> <br /> <label> <input type="checkbox" name="copy" onclick="return copyBillingToShipping(this.form)" /> Same shipping information </label> <br />
<br /> Telephone <br /> <label> (<input type="text" id="billingAreaCode" size="1" />) <input type="text" id="billingPhoneDigit3" size="5" /> <input type="text" id="billingPhoneDigit4" size="5" /> </label> <br /> Password <br /> <label> <input type="password" id="billingPassword" size="30" /> </label> <br /><br /> Password Confirmation <br /> <label> <input type="password" id="billingPasswordconferm" size="30" /> </label>
<h3 id="deliverytext">Delivery Rates <div class="border1"> <table class="billingRates"> <tr> <th colspan = "35"></th> <th colspan = "35">4 weeks</th> <th colspan = "35">13 weeks</th> <th colspan = "35">26 weeks</th> <th colspan = "35">52 weeks</th> </tr> <tr> <td colspan = "35">Mon-Fri</td> <td colspan = "35"><input type="radio" value="$12.60" name="rate" />$12.60</td> <td colspan = "35"><input type="radio" value="$40.95" name="rate" />$40.95</td> <td colspan = "35"><input type="radio" value="$81.90" name="rate" />$81.90</td> <td colspan = "35"><input type="radio" value="$156.00" name="rate"/>$156.00</td> </tr> <tr> <td colspan ="35">EveryDay</td> <td colspan ="35"><input type="radio" value="$13.56" name="everyday" />$13.56</td> <td colspan ="35"><input type="radio" value="$44.07" name="everyday" />$44.07</td> <td colspan ="35"><input type="radio" value="$88.14" name="everyday"/>$88.14</td> <td colspan ="35"><input type="radio" value="$159.74" name="everyday"/>$159.74</td> </tr> </table> <table id="table2"> <tr> <td colspan="177" id="checkbox"><input type="checkbox" value="$3.50" name="sundayCheckbox" onclick="return sundayRate(this.form)" />Sundays only($3.50 Per week)</td> </tr> </table> </div >

<label> <input type="radio" name="billWeekly" value="Bill me weekly" />Bill me weekly <input type="radio" name="billMeMonthly" value="Bill me monthly" />Bill me monthly </label>

<div class="border2"> <p class="border2"> Do you already subscribe to any of these newspapers?

<label> <input type="checkbox" name="newspapers" value="New York Times" />New York Times<br /> <input type="checkbox" name="newspapers" value="Boston Globe"/>Boston Globe<br /> <input type="checkbox" name="newspapers" value="San Francisco Chronicle"/>San Francisco Chronicle<br /> <input type="checkbox" name="newspapers" value="Los Angeles Times"/>Los Angeles Times<br /> <input type="checkbox" name="newspapers" value="Other"/>Other </label>

<input type="submit" onclick=" return validate(this.form)" value="Submit" /> <input type="reset" value="Reset" />

</form>
</body> </html> // end of html file

Share this post


Link to post
Share on other sites
Not sure if this is the problem, but in the HTML you name a field "billingPasswordconferm" but in the javascript the 'c' is capitalized. The ids are case-sensitive in XHTML. You should fix the spelling to be 'confirm', too. :)

Share this post


Link to post
Share on other sites
Same conclusion here with the capital C at the input id causing the problem. By changing
<input type="password" id="billingPasswordconferm" size="30" />
to
<input type="password" id="billingPasswordConferm" size="30" />
everything started working.

Share this post


Link to post
Share on other sites
Ok, I tried you suggestions and it worked, thank's for your help.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this