Click to See Complete Forum and Search --> : Forms Help


bajanboost
01-17-2005, 09:57 PM
Ok Guys, I am not too good with this, so don't laugh...I am a newbie...

I am making a form and I would like it to tell the user when they are fulling out that they are missing certain fields or they must type in the certain fields...
Here is a general example of what the form looks like:

<form method=POST action=http://www.bajanboost.com/perl/formmail.pl>
<input type=hidden name=recipient value=sales@bajanboost.com>
<input type=hidden name=redirect value=http://www.bajanboost.com/confirm.php>
<input type=hidden name=subject value='Form Query'>

<table width=600>
<tr><td><center><u><big>Contact Details</big></u></td></tr>
<tr><td>Name: <INPUT TYPE=TEXT NAME="NAME" SIZE=30 MAXLENGTH=10><br><br></td></tr>
<tr><td>Home Number:<br><INPUT TYPE=TEXT NAME="HOME" SIZE=10 MAXLENGTH=13></td><td>Work Number:<br><INPUT TYPE=TEXT NAME="WORK" SIZE=10 MAXLENGTH=13></td><td>Cell Number:<br><INPUT TYPE=TEXT NAME="CELL" SIZE=10 MAXLENGTH=13></td></tr>

<tr><td>Email: <INPUT TYPE=TEXT NAME="CELL" SIZE=30 MAXLENGTH=30></td></tr>
<tr><td><center><u><big>Vehicle Details</big></u></td></tr>
<input type=reset value=Clear> <input type=Submit name=Submit value=Submit></table></form>

I would like it for example when the user does not enter a home number it says "Please Enter your home number etc"

PeOfEo
01-17-2005, 11:04 PM
You can do this with javascript, but you should also check the form server side with a few if statements as a backup because not everyone supports javascript.

phpnovice
01-17-2005, 11:18 PM
Originally posted by bajanboost
Ok Guys, I am not too good with this, so don't laugh...I am a newbie...

I am making a form and I would like it to tell the user when they are fulling out that they are missing certain fields or they must type in the certain fields...
Here is an example of client-side validation using JavaScript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Form Validation</title>
<style type="text/css">
<!--
table { border-style: solid; border-width: 0px; }
th { padding-left: 5px; padding-right: 5px; padding-top: 0px; padding-bottom: 0px;
text-decoration: underline; }
td { padding-left: 5px; padding-right: 5px; padding-top: 0px; padding-bottom: 0px; }
-->
</style>
<script type="text/javascript">
<!--//
function validateForm(f) {
if (f.NAME.value.isEmpty()) {
alert("Name is required.");
f.NAME.select();
f.NAME.focus();
return false;
}
if (f.EMAIL.value.isEmpty()) {
alert("Email is required.");
f.EMAIL.select();
f.EMAIL.focus();
return false;
}
return true;
}
String.prototype.isEmpty = function() {
return /^\s*$/.test(this.toString());
}
//-->
</script>
</head>

<body>
<form method=POST action="http://www.bajanboost.com/perl/formmail.pl"
onsubmit="return validateForm(this);">
<table>
<tr>
<th align="center" colspan="3">Contact Details</th>
</tr>
<tr>
<td align="right">Name: </td>
<td colspan="2"><INPUT TYPE=TEXT NAME="NAME" SIZE=30 MAXLENGTH=10 ALT="FULL NAME"></td>
</tr>
<tr>
<td align="right">Home Number: </td>
<td colspan="2"><INPUT TYPE=TEXT NAME="HOME" SIZE=13 MAXLENGTH=13 ALT="HOME PHONE"></td>
</tr>
<tr>
<td align="right">Work Number: </td>
<td colspan="2"><INPUT TYPE=TEXT NAME="WORK" SIZE=13 MAXLENGTH=13 ALT="WORK PHONE"></td>
</tr>
<tr>
<td align="right">Cell Number: </td>
<td colspan="2"><INPUT TYPE=TEXT NAME="CELL" SIZE=10 MAXLENGTH=13 ALT="CELL PHONE"></td>
</tr>
<tr>
<td align="right">Email: </td>
<td colspan="2"><INPUT TYPE=TEXT NAME="EMAIL" SIZE=30 MAXLENGTH=30 ALT="EMAIL ADDRESS"></td>
</tr>
<tr>
<th align="center" colspan="3">Vehicle Details</th>
</tr>
<tr>
<td align="center">
<input type=hidden name=subject value="Form Query">
<input type=hidden name=redirect value="http://www.bajanboost.com/confirm.php">
<input type=hidden name=recipient value="sales@bajanboost.com">
</td>
<td align="center"><input type=reset value=Clear alt="Clear Form"></td>
<td align="center"><input type=Submit name=Submit value=Submit alt="Submit Form"></td>
</tr>
</table>
</form>
</body>
</html>

bajanboost
01-18-2005, 06:42 PM
SWEET!
Thanks a lot man!!!

ANy more guys got suggestions?

bajanboost
01-18-2005, 07:52 PM
Ok...
I am getting it to work...jus got a problem with it coems to drop donw list....it is submitting the email rather than allowing a user to change the field...
-----------------------
}
if (f.Make.value.isEmpty()) {
alert("The Vehicle Make is required.");
f.Make.select();
f.Make.focus();
return false;
}
--------------------


<tr>
<td><b>Make:</b><br>
<select name="Make">
<option selected>Select One</option>
<option value="OTHER">OTHER</option>
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Chevy">Chevy</option>
<option value="Chrysler">Chrysler</option>
<option value="Daewoo">Daewoo</option>
<option value="Dodge">Dodge</option>
<option value="Ford">Ford</option>
<option value="Honda">Honda</option>
<option value="Hyundai">Hyundai</option>
<option value="Isuzu">Isuzu</option>
<option value="Kia">KIA</option>
<option value="Mazda">Mazda</option>
<option value="Mercedes">Mercedes</option>
<option value="Mini Moke">Mini Moke</option>
<option value="Mitsubishi">Mitsubishi</option>
<option value="Morris">Morris</option>
<option value="Nissan">Nissan</option>
<option value="Opel">Opel</option>
<option value="Peugeot">Peugeot</option>
<option value="Plymouth">Plymouth</option>
<option value="Proton">Proton</option>
<option value="Porsche">Porsche</option>
<option value="Rover">Rover</option>
<option value="Skoda">Skoda</option>
<option value="Subaru">Subaru</option>
<option value="Suzuki">Suzuki</option>
<option value="Toyota">Toyota</option>
<option value="Vauxhall">Vauxhall</option>
<option value="Volkswagen">Volkswagen</option>
<option value="Westfield">Westfield</option>
</select>
</td>
<tr>

bajanboost
01-18-2005, 10:05 PM
Ok guys, below is the complete code...
But the Function isn't working for telling people that they must Enter a field!!!!!
:S
I tried it so many times with different formats...
Also, I have not a clue how to use the javascript function with drop downlist...
any ideas? any help...

the link to the site is:
www.bajanboost.com/sellform.php

<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<script type="text/javascript">
<!--//
function validateForm(f) {
if (f.NAME.value.isEmpty()) {
alert("Name is required.");
f.NAME.select();
f.NAME.focus();
return false;
}
if (f.email.value.isEmpty()) {
alert("Email is required.");
f.email.select();
f.email.focus();
return false;
}
if (f.Make.value.isEmpty()) {
alert("The Vehicle Make is required.");
f.Make.select();
f.Make.focus();
return false;
}
if (f.MODEL.value.isEmpty()) {
alert("The Vehicle MODEL is required.");
f.MODEL.select();
f.MODEL.focus();
return false;
} if (f.HOME.value.isEmpty()) {
alert("The Home Number is required. We need to Contact You!! ");
f.HOME.select();
f.HOME.focus();
return false;
}
if (f.CELL.value.isEmpty()) {
alert("Your Cell Phone number is required. If you do not have one, put "none" in the field");
f.CELL.select();
f.CELL.focus();
return false;
}
if (f.YEAR.value.isEmpty()) {
alert("The Vehicle YEAR is required.");
f.YEAR.select();
f.YEAR.focus();
return false;
}
if (f.COLOR.value.isEmpty()) {
alert("The Vehicle COLOR is required.");
f.COLOR.select();
f.COLOR.focus();
return false;
}
return true;
}
String.prototype.isEmpty = function() {
return /^\s*$/.test(this.toString());
}
//-->
</script>

<?php include ("header.php");?><p></head>
<body>

<?php
print("&nbsp;&nbsp;<a href=mainpage.php>Home</a> -> Sell Your Car");
print("</li><table><tr><td valign=top><table width=600 valign=top class=module>");
print("<tr valign=top><td colspan=2 valign=top><h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sell Your Car</h1></tr>");
print("</table></table>");
print("</center>");

?>
<table width=600 align=center>
<tr><td>
<form method=POST action=http://www.bajanboost.com/perl/formmail.pl
onsubmit="return validateForm(this);">
<table>
<tr>
<th align="center" colspan="4"><font color=#FFFFFF>Contact Details</font></th>
</tr>
<tr>
<td align="right">Name: </td>
<td colspan="3"><INPUT TYPE=TEXT NAME=NAME SIZE=30 MAXLENGTH=30 ALT="FULL NAME"></td>
</tr>
<tr>
<td align="right">Home Number: </td>
<td colspan="3"><INPUT TYPE=TEXT NAME=HOME SIZE=15 MAXLENGTH=15 ALT="HOME PHONE"></td>
</tr>
<tr>
<td align="right">Work Number: </td>
<td colspan="3"><INPUT TYPE=TEXT NAME=WORK SIZE=15 MAXLENGTH=15 ALT="WORK PHONE"></td>
</tr>
<tr>
<td align="right">Cell Number: </td>
<td colspan="3"><INPUT TYPE=TEXT NAME=CELL SIZE=15 MAXLENGTH=15 ALT="CELL PHONE"></td>
</tr>
<tr>
<td align="right">E-Mail:</td><td colspan="3"><input type=text name=email ALT="E-Mail Address" SIZE=30>
</td>
</tr>
<tr>
<td colspan="4"><br><br></td>
</tr>

<tr>

<th align="center" colspan="4"><font color=#FFFFFF>Vehicle Details</font></th><th></th><th></th><th>
</tr>
<tr>
<td align="right">Make:</td><td>
<select name="Make">
<option selected>Select One</option>
<option value="OTHER">OTHER</option>
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Chevy">Chevy</option>
<option value="Chrysler">Chrysler</option>
<option value="Daewoo">Daewoo</option>
<option value="Dodge">Dodge</option>
<option value="Ford">Ford</option>
<option value="Honda">Honda</option>
<option value="Hyundai">Hyundai</option>
<option value="Isuzu">Isuzu</option>
<option value="Kia">KIA</option>
<option value="Mazda">Mazda</option>
<option value="Mercedes">Mercedes</option>
<option value="Mini Moke">Mini Moke</option>
<option value="Mitsubishi">Mitsubishi</option>
<option value="Morris">Morris</option>
<option value="Nissan">Nissan</option>
<option value="Opel">Opel</option>
<option value="Peugeot">Peugeot</option>
<option value="Plymouth">Plymouth</option>
<option value="Proton">Proton</option>
<option value="Porsche">Porsche</option>
<option value="Rover">Rover</option>
<option value="Skoda">Skoda</option>
<option value="Subaru">Subaru</option>
<option value="Suzuki">Suzuki</option>
<option value="Toyota">Toyota</option>
<option value="Vauxhall">Vauxhall</option>
<option value="Volkswagen">Volkswagen</option>
<option value="Westfield">Westfield</option>
</select>
</td>
<td align="right">Model: </td>
<td><INPUT TYPE=TEXT NAME=MODEL SIZE=15 MAXLENGTH=30 ALT="Vehicle Model"></td>
<td colspan="2">&nbsp;</td><td colspan="2">&nbsp;</td>
<td align="right">Year: </td>
<td><INPUT TYPE=TEXT NAME=YEAR SIZE=15 MAXLENGTH=5 ALT="Vehicle Year"></td>
</tr>
<tr><td colspan="6"><br></td></tr>
<tr>
<td align="right">Mileage: </td>
<td><INPUT TYPE=TEXT NAME=MILEAGE SIZE=11 MAXLENGTH=15 ALT="Vehicle Mileage"></td>
<td align="right">Vehicle Type: </td>
<td><INPUT TYPE=TEXT NAME=TYPE SIZE=15 MAXLENGTH=30 ALT="Vehicle Type"></td>
<td colspan="2">&nbsp;</td><td colspan="2">&nbsp;</td>
<td align="right">Color: </td>
<td><INPUT TYPE=TEXT NAME=COLOR SIZE=15 MAXLENGTH=20 ALT="Vehicle Color"></td>
</tr>
<tr><td colspan="6"><br></td></tr>
<tr>
<td align="right">Displacement: </td>
<td colspan="4"><INPUT TYPE=TEXT NAME=DISPLACEMENT SIZE=30 MAXLENGTH=30 ALT="The engine displacement" Value="cc"></td>
</tr>
<tr><td colspan="6"><br></td></tr>
<tr>
<td align="right">Gas:</td><td>
<select name="GAS">
<option selected>Select One</option>
<option value="Gas">Gas</option>
<option value="Diesel">Diesel</option>
</select>
</td>
<td align="right">Transmission:</td><td>
<select name="Transmission">
<option selected>Select One</option>
<option value="Automatic 3speed">Automatic 3-speed</option>
<option value="Automatic 4speed">Automatic 4-speed</option>
<option value="Automatic 5speed">Automatic 5-speed</option>
<option value="Automatic 4speed">Automatic 6-speed</option>
<option value="Manual 4speed">Manual 4-speed</option>
<option value="Manual 5speed">Manual 5-speed</option>
<option value="Manual 4speed">Manual 6-speed</option>
<option value="Titronic">Titronic</option>
<option value="Triptronic">Triptronic</option>
</select>
</td>
<td colspan="2">&nbsp;</td><td colspan="2">&nbsp;</td>
<td align="right">Steering:</td><td>
<select name="STEERING">
<option selected>Select One</option>
<option value="Left Hand">Left Hand Drive</option>
<option value="Right Hand">Right Hand Drive</option>
</select>
</td>
</tr>
<tr><td colspan="6"><br></td></tr>
<tr>
<td align="right">Valued Price: </td>
<td colspan="4"><INPUT TYPE=TEXT NAME=VALUE SIZE=30 MAXLENGTH=30 ALT="Valued Vehicle Price" Value="$"></td>
</tr>
<tr>
<td align="right">Asking Price: </td>
<td colspan="4"><INPUT TYPE=TEXT NAME=PRICE SIZE=30 MAXLENGTH=30 ALT="Valued Asking Price" Value="$"></td>
</tr>
<tr>
<td align="right">Valuation Date: </td>
<td colspan="4"><INPUT TYPE=TEXT NAME=WHEN SIZE=30 MAXLENGTH=30 ALT="When was the vehicle Valued?" value="DD/MM/YY"></td>
</tr>
<tr><td colspan="6"><br></td></tr>

<tr><td colspan="1">Features:<br></td>
<td colspan="4"><TEXTAREA NAME="FEATURES" ROWS=4 COLS=50 WRAP=PHYSICAL>
</TEXTAREA></td></tr>

<tr><td colspan="1">Modifications:<br></td>
<td colspan="4"><TEXTAREA NAME="MODIFICATIONS" ROWS=4 COLS=50 WRAP=PHYSICAL>
</TEXTAREA></td></tr>

<tr><td colspan="1">Personal Comments:<br></td>
<td colspan="4"><TEXTAREA NAME="COMMENTS" ROWS=4 COLS=50 WRAP=PHYSICAL>
</TEXTAREA></td></tr>
<tr><td colspan="6"><br></td></tr><tr><td colspan="6"><br></td></tr>


<tr>
<td align="center">
<input type=hidden name=subject value="BAJANBOOST!!! Car Sale FORM!!! ">
<input type=hidden name=redirect value="http://www.bajanboost.com/confirm.php">
<input type=hidden name=recipient value="sales@bajanboost.com">
</td>
<td align="center"><input type=reset value=Clear alt="Clear Form"></td>
<td align="center"><input type=Submit name=Submit value=Submit alt="Submit Form"></td>
</tr>
</table>
</form>
</tr></td>
</table>
<?php include ("footer.html");?>
</body>
</html>

phpnovice
01-18-2005, 10:20 PM
Originally posted by bajanboost
Ok guys, below is the complete code...
But the Function isn't working for telling people that they must Enter a field!!!!!
Probably because your browser isn't recognizing this tag:

<script type="text/javascript">

Try changing that to this:

<script language="javascript">

It's too long of a story to explain to you why this might be so.

bajanboost
01-19-2005, 06:31 PM
Originally posted by phpnovice
Probably because your browser isn't recognizing this tag:

<script type="text/javascript">

Try changing that to this:

<script language="javascript">

It's too long of a story to explain to you why this might be so.

Oh I mean for the drop down list..it works for the Input option...but when you use the <select> I can't seem to work it...
can anyone look at the code and tell me how to fix it..??
PLEASE
need this up ASAP!

http://www.bajanboost.com/sellform.php

phpnovice
01-19-2005, 09:55 PM
Originally posted by bajanboost
Oh I mean for the drop down list..it works for the Input option...but when you use the <select> I can't seem to work it...
You said:
Originally posted by bajanboost
...the Function isn't working for telling people that they must Enter a field!!!!!
Be more precise with your statements next time. :p

if (f.Make.selectedIndex < 1) {
alert("The Vehicle Make is required.");
f.Make.focus();
return false;
}

bajanboost
01-21-2005, 11:22 AM
OH man....thanks a lot guys...your help was very much appreciated!! :D :D :D :D :D

I owe you guys...


Hey, can you guys go through my site and tell me what you all think?
I am trying to update it and stuff....

It was originally made for me, but now I am trying to do it myself...


www.bajanboost.com

Let me know!

THANKS GUYS!!

PeOfEo
01-21-2005, 03:52 PM
You need a doc type 1st off.
You should ideally be using css for layout because a table based layout is going to fail to linearize for those with audio braille browser, keep your code unorganized, and waste your bandwidth.
http://validator.w3.org/check?verbose=1&uri=http%3A//www.bajanboost.com/mainpage.php is your validation.