Validate Form

Question

loll_l 0 Light Poster

14 Years Ago

Please see my Booking Form here http://www.n-v-m.co.uk/Booking.html

The form is very nearly finished but I have no experience with JavaScript at all so I am hoping somebody can tell me how to do the finishing touches.

All I require is:

1- On clicking the 'Submit order' button I would like the browser to check to see if the 'Is Vehicle roadworthy with full M.O.T.:' List/Menu is set to 'Yes' and if not it needs to return an alert stating it must be set to 'Yes' to proceed... Somebody kindly helped show me how to do the alert before so this is working, but, the problem at the moment is after clicking 'OK' to close the alert, the form is still submitted. At this point instead of the form being submitted I would just like the browser to return to the form.

2- There is a checkbox on the bottom of the form that states 'I agree with the Terms and Conditions'... To be able to proceed with a booking I need the customer to check the box... On clicking 'Submit order' if the box isn't checked I would like an alert to appear and the form not to be submitted.

3. When both the above criteria have been met and the form is ready to submit... I would like the browser to re-direct to http://www.n-v-m.co.uk/Thankyou.html which is a page I have already created on my server.

Thanks for taking your time to read this... If it helps I have posted both my HTML and PHP codes below:

Booking.html

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>National Vehicle Movements - Booking Form</title>
<style type="text/css">
<!--
body {
	background-color: #1d255f;
	margin: 0px;
	padding: 0px;
}
#apDiv1 {
	position:absolute;
	width:487px;
	height:706px;
	z-index:auto;
	left: 50%;
	top: 433px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	textarea-align: center;
	background-position: center;
	margin-left: -244px;
}
-->
</style>

<script type='text/javascript'>
function isValid() {
var box = document.getElementById('Is Vehicle Roadworthy with Full M.O.T.');
if(box.value = 'no') {
	alert('The vehicle must be roadworthy with full M.O.T');
return false;
}
}
</script>


</head>
<body>
<div align="left">
  <div id="apDiv1">
    <form id="form1" name="form1" method="post" action="sendform.php" onsubmit='validatethis()'>
<table width="400" border="0" align="center">
  
  <tr>
    <td width="193" align="right">Company:</td>
    <td width="197" align="left"><input type="text" name="company" id="Company" /></td>
  </tr>
  <tr>
    <td align="right">Name:</td>
    <td align="left"><input type="text" name="name" id="Name" /></td>
  </tr>
  <tr>
    <td align="right">Phone Number:</td>
    <td align="left"><input type="text" name="phonenum" id="Phone Number" /></td>
  </tr>
  <tr>
    <td align="right">Email Address:</td>
    <td align="left"><input type="text" name="email" id="Email" /></td>
  </tr>
  <tr>
    <td align="right">Vehicle Make and Model:</td>
    <td align="left"><input type="text" name="vmam" id="Vehicle Make and Model" /></td>
  </tr>
  <tr>
    <td align="right">Vehicle Reg./Ref. No.:</td>
    <td align="left"><input type="text" name="vreg" id="Vehicle Reg." /></td>
  </tr>
  <tr>
    <td align="right">Collection Address including Postcode:</td>
    <td align="left"><textarea name="colladd" rows="4" id="Collection Address"></textarea></td>
  </tr>
  <tr>
    <td align="right">Collection Contact Name:</td>
    <td align="left"><input type="text" name="collconname" id="Collection Contact Name" /></td>
  </tr>
  <tr>
    <td align="right">Collection Contact Number:</td>
    <td align="left"><input type="text" name="collconnum" id="Collection Contact Number" /></td>
  </tr>
  <tr>
    <td align="right">Delivery Address including Postcode:</td>
    <td align="left"><textarea name="deladd" rows="4" id="Delivery Address"></textarea></td>
  </tr>
  <tr>
    <td align="right">Delivery Contact Name:</td>
    <td align="left"><input type="text" name="delconname" id="Delivery Contact Name" /></td>
  </tr>
  <tr>
    <td align="right">Delivery Contact Number:</td>
    <td align="left"><input type="text" name="delconnum" id="Delivery Contact Number" /></td>
  </tr>
  <tr>
    <td align="right">Collection Date/Time:</td>
    <td align="left"><input type="text" name="collectiondt" id="Collection Date/Time" /></td>
  </tr>
  <tr align="center">
    <td colspan="2" valign="top"><em>(if possible please give a time window eg. '7th - 9th August' and we will arrange collection for you)</em></td>
    </tr>
    <tr>
    <td align="right">Delivery Date/Time:</td>
    <td align="left"><input type="text" name="deliverydt" id="Delivery Date/Time" /></td>
  </tr>
    <tr align="center">
      <td colspan="2" valign="top"><em>(if possible please give a time window eg. '7th - 9th August' and we will arrange delivery for you)</em></td>
      </tr>
  <tr>
    <td align="right">Is Vehicle Taxed:</td>
    <td align="left"><select name="Taxed" id="Is Vehicle Taxed">
          <option>Yes</option>
          <option selected="selected">No</option>
        </select></td>
  </tr>
  <tr>
    <td align="right">Is Vehicle roadworthy with full M.O.T.:</td>
    <td align="left"><select name="mot" id="Is Vehicle Roadworthy with Full M.O.T.">
          <option>Yes</option>
          <option selected="selected">No</option>
        </select></td>
  </tr>
  <tr>
    <td align="right">Billing Address:</td>
    <td align="left"><textarea name="billadd" rows="3" id="Billing Address"></textarea></td>
  </tr>
  <tr align="center">
    <td colspan="2" valign="top"><em>(if same as collection or delivery address please enter 'collection' or 'delivery')</em></td>
    </tr>
  <tr>
    <td align="right">Your Ref./Order No. (if any):</td>
    <td align="left"><input type="text" name="custordnum" id="Customer Ref./Order No." /></td>
  </tr>
  <tr>
    <td align="right">Any additional comments:</td>
    <td align="left"><textarea name="addcom" rows="3" id="Any additional comments"></textarea></td>
  </tr>
<tr align="center" valign="middle">
<td colspan="2">
  <p>
    <input type="checkbox" name="checkbox" id="checkbox" />
    I agree with the <u><a href="Terms.html">Terms and Conditions</a></u></strong></p>
  <p>&nbsp;</p></td>
  </tr>
<tr align="center">
  <td colspan="2"><input type="submit" name="button" id="button" value="Submit order" onclick="isValid()" />
    <input type="reset" name="button2" id="button2" value="Reset form" /></td>
</tr>
  </table>
    </form>
  </div>
</div>
<div align="center"><img src="images/Booking_03.jpg" width="680" height="1352" border="0" usemap="#Map" />
  <map name="Map" id="Map">
    <area shape="rect" coords="36,155,158,173" href="index.html" alt="Home" />
    <area shape="rect" coords="29,174,151,189" href="Prices.html" alt="Prices" />
    <area shape="rect" coords="475,191,578,206" href="mailto:info@n-v-m.co.uk" alt="Email us" />
  </map>
</div>
</body>
</html>

sendform.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <BODY>
  <?php

$Name = $_POST['name']; //senders name

$to = "info@n-v-m.co.uk"; //recipient
$subject = "Order from ".$_POST['company']." (".$_POST['name'].")"; //subject
$message = $_POST['company']."|".$_POST['name']."|".$_POST['phonenum']."|".$_POST['email']."|".$_POST['vmam']."|".$_POST['vreg']."|".$_POST['colladd']."|".$_POST['collconname']."|".$_POST['collconnum']."|".$_POST['deladd']."|".$_POST['delconname']."|".$_POST['delconnum']."|".$_POST['collectiondt']."|".$_POST['deliverydt']."|".$_POST['Taxed']."|".$_POST['billadd']."|".$_POST['custordnum']."|".$_POST['addcom']; //mail body
$from = "NVM Booking Form"; //
$headers = "From: ".$from."\r\n"; //optional headerfields
 
mail($to, $subject, $message, $headers); //mail command :) you can add any variable here... I know you have so many, but it is possible...
if(mail)
	echo "Booking confirmed. Thank You!";
else
	echo "Sorry We Can't Proceed, Please Try After Some Time!";
?>
</BODY>
</HTML>

javascript

2 Contributors
2 Replies
164 Views
22 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by loll_l

Graphix 68 ---

14 Years Ago

>> You want the form to be checked before submitted:

Change the form tag into:

<form id="form1" name="form1" method="post" action="sendform.php" onsubmit='return isValid()'>

And the submit button into:

<input type="submit" name="button" id="button" value="Submit order" />

And the checkbox into:

<input type="checkbox" name="checkbox" id="checkbox"  value="agreed"/>

Then use the following javascript function:

function isValid() {
var checkbox = document.getElementById('checkbox').checked;
var mot = document.getElementById('Is Vehicle Roadworthy with Full M.O.T.').value;
if (mot == "Yes" && checkbox == true) {
	return true;
} else {
     if (mot != "Yes") {
	  alert("Your vehicle must be roadworthy with full M.O.T.");
	 }
	 if (checkbox != true) {
	  alert("You have to agree with the Terms and Conditions");
	 }
     return false;
}
}

>> You want to redirect the user after submitting

Place the following code at the end of sendform.php:

header('Location: http://www.n-v-m.co.uk/Thankyou.html');

~G

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

loll_l 0 Light Poster · Answer 1 · 2010-02-03T22:37:00+00:00

loll_l 0 Light Poster

14 Years Ago

cheers mate