Forum Moderators: open
<script language="javascript" type="text/javascript">
<!-- hide script from older browsers
function validateForm(form)
{
if(document.form.firstname.value=="")
{
alert("Please enter your first name.");
document.form.firstname.focus();
return false;
}
}
stop hiding script -->
</script>
</script>
</head>
<body>
<form name="form" method="post" action="" onSubmit="return validateForm(form);">
<h3>Request Form</h3>
<p>Please take a few moments to fill out your personal information:</p>
<br />
First name:
<input type="text" name="firstname" size="25>
<br />
Last name:
<input type="text" name="lastname" size="25"><br />
<br />
Mailing Address:
<input type="text" name="mailingaddress" size="25"><br />
<br />
Second Line:
<input type="text" name="second line" size="25"><br />
<br />
City:
<input type="text" name="city" size="25"><br />
<br />
State:
<input type="text" name="state" size="25"><br />
<br />
Country:
<input type="text" name="country" size="25"><br />
<p>If you decide to fill out the following survey, you will receive a free gift from our company (mailed out separately from your order):</p>
<br />
<p>What's your gender?</p>
Male:
<input type="radio" checked
name="Sex" value="male">
<br />
Female:
<input type="radio"
name="Sex" value="female"><br />
<p>What's your origin?</p>
White:
<input type="radio" checked
name="Origin" value="White">
<br />
Black:
<input type="radio"
name="Origin" value="Black"><br />
<br />
Hispanic:
<input type="radio"
name="Origin" value="Hispanic"><br />
<br />
Indian:
<input type="radio"
name="Origin" value="Indian"><br />
<p>What's your status?</p>
Single:
<input type="radio" checked
name="Status" value="Single"><br />
<br />
Married:
<input type="radio"
name="Status" value="Married"><br />
<br />
Divorced:
<input type="radio"
name="Status" value="Divorced"><br />
<br />
Widowed:
<input type="radio"
name="Status" value="Widowed"><br />
<br />
<input type="submit" value="Send">
<input type="reset" value="Reset">
</div>
</form>
</body>
</html>
Simply add a series of parallel tests, patterned after the first one you've listed, but begin the rest with "else if". In other words, insert the second test immediately after the first, thus:
. . .
document.form.firstname.focus();
return false;
}
else if(document.form.lastname.value=="") {
alert("Please enter your last name.");
document.form.lastname.focus();
return false;
}
else if(document.form.mailingaddress.value=="") {
etc.
Note: without adding too much code you might do a bit more --say, insure that an entry in a particular field is at least "x" characters long, an alternative is:
if (document.form.firsttname.value.length < 2)
(In which case, the "alert" would read "Please enter a full first name".)
Of course, the form won't work until you put something in "action"!
function validateForm(form)
{
if(document.form.firstname.value=="")
{
alert("Please enter your first name.");
document.form.firstname.focus();
return false;
}
else if(documet.form.lastname.value=="") {
alert("Please enter your last name.");
document.form.lastname.focus();
return false;
}
else if(documet.form.mailingaddress.value=="") {
alert("Please enter your mailing address.");
document.form.mailingaddress.focus();
return false;
}
else if(documet.form.secondline.value=="") {
alert("Please continue filling out your mailing address.");
document.form.secondline.focus();
return false;
}
else if(documet.form.city.value=="") {
alert("Where do you live?.");
document.form.city.focus();
return false;
}
else if(documet.form.state.value=="") {
alert("You forgot your state.");
document.form.state.focus();
return false;
}
else if(documet.form.country.value=="") {
alert("In which country do you live?.");
document.form.country.focus();
return false;
}
stop hiding script -->
</script>
</head>
<body>
<form name="form" method="post" action="mailto:example@hotmail.com" onSubmit="return validateForm(form);">
[edited by: korkus2000 at 7:24 pm (utc) on May 4, 2004]
[edit reason] examplified email address [/edit]
else if(documet
Change the last word to document and I think you'll be in business
For all my radio buttons, do you use the same if(document...) or do I use a different command?
Line 57, Char 1, Error: Expected '}'
As this message suggests, you simply forgot a closing bracket. Note that each test has its own pair of brackets, but that there is also a pair of brackets enclosing the entire function. That's what you forgot to close (though you had it right in the in your original code).
If you make this one correction, I believe the other "error" will be taken care of.
One other error I noticed --the name of one field in your form is listed as "secondline" in the validation script, but has a space ("second line") in the form itself. Easy solution: get rid of the space! But also, I would highly recommend not including a test for this particular field. This makes it a "required" field. But not everyone has a two-line address.
As for the radio buttons. You are correct that they would require a different sort of test. For each set you would need to test whether any of the fields is checked. (Incidentally, to do all this you will want to remove "checked" wherever you have it included in the form.) Using the one with the most alternatives as an example, you would include tests like the following:
else if(!document.form.Origin[0].checked &&
!document.form.Origin[1].checked&&
!document.form.Origin[2].checked&&
!document.form.Origin[3].checked) {
alert("Please mark your ethnic origin!");
return false;
}
(Note that in this case there is no text box to return the focus to. You could probably come up with some code to return focus elsewhere, but I don't know that it is needed.)
But are you sure you want to include tests for these last three fields? The instructions in your form suggest that this section is optional. If that is truly the case, you should not force the user to make a selection before the form will be submitted.
1. Create a page that collects all the form data so that the customer could verify the information. The page will be named "verify.html". On that page, have two links (yes/no): if the customer selects yes, it will link you to page "thanks.html"...if he selects no, it will take you back to the form.
I thought I wasn't going to have a problem with the links, however, when I click on the submit button, I receive a blank page with HTTP Error 405, besides the fact that I don't have a clue on how to collect the data from the form and have it displayed on "verify.html". On the action I put action="verify.html", but as usual, there's gotta be a trick to make it work. Here's where I need your help again!
Again, thanks for all your help, and your quick responses. I have learned a lot more here than on the classroom...
