This is my booking form: http://www.n-v-m.co.uk/Booking.html

When 'Submit Order' is clicked a PHP script is triggered that emails me details of the order...

What I require is an alert to pop up if either:
a) The customer has selected 'No' for 'Is Vehicle roadworthy with full M.O.T.'
or
b) The customer has not checked the 'I agree with the Terms and Conditions' box.

The alert should pop up in front of the booking form and say either "The vehicle must be roadworthy with full M.O.T." or "You must agree to the Terms and Conditions".

Can somebody please tell me how to do this using Javascript?

I have included the code for my booking form and php script below just in case it helps.

Cheers

Paul

Booking Form:

<!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></head>
 
<body>
<div align="left">
  <div id="apDiv1">
    <form id="form1" name="form1" method="post" action="sendform.php">
<table width="400" border="0" align="center">
  
  <tr>
    <td width="193" align="center">Company:</td>
    <td width="197" align="center"><input type="text" name="company" id="Company" /></td>
  </tr>
  <tr>
    <td align="center">Name:</td>
    <td align="center"><input type="text" name="name" id="Name" /></td>
  </tr>
  <tr>
    <td align="center">Phone Number:</td>
    <td align="center"><input type="text" name="phonenum" id="Phone Number" /></td>
  </tr>
  <tr>
    <td align="center">Email Address:</td>
    <td align="center"><input type="text" name="email" id="Email" /></td>
  </tr>
  <tr>
    <td align="center">Vehicle Make and Model:</td>
    <td align="center"><input type="text" name="vmam" id="Vehicle Make and Model" /></td>
  </tr>
  <tr>
    <td align="center">Vehicle Reg./Ref. No.:</td>
    <td align="center"><input type="text" name="vreg" id="Vehicle Reg." /></td>
  </tr>
  <tr>
    <td align="center">Collection Address including Postcode:</td>
    <td align="center"><textarea name="colladd" rows="4" id="Collection Address"></textarea></td>
  </tr>
  <tr>
    <td align="center">Collection Contact Name:</td>
    <td align="center"><input type="text" name="collconname" id="Collection Contact Name" /></td>
  </tr>
  <tr>
    <td align="center">Collection Contact Number:</td>
    <td align="center"><input type="text" name="collconnum" id="Collection Contact Number" /></td>
  </tr>
  <tr>
    <td align="center">Delivery Address including Postcode:</td>
    <td align="center"><textarea name="deladd" rows="4" id="Delivery Address"></textarea></td>
  </tr>
  <tr>
    <td align="center">Delivery Contact Name:</td>
    <td align="center"><input type="text" name="delconname" id="Delivery Contact Name" /></td>
  </tr>
  <tr>
    <td align="center">Delivery Contact Number:</td>
    <td align="center"><input type="text" name="delconnum" id="Delivery Contact Number" /></td>
  </tr>
  <tr>
    <td align="center">Collection Date/Time:</td>
    <td align="center"><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="center">Delivery Date/Time:</td>
    <td align="center"><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="center">Is Vehicle Taxed:</td>
    <td align="center"><select name="Taxed" id="Is Vehicle Taxed">
          <option>Yes</option>
          <option selected="selected">No</option>
        </select></td>
  </tr>
  <tr>
    <td align="center">Is Vehicle roadworthy with full M.O.T.:</td>
    <td align="center"><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="center">Billing Address:</td>
    <td align="center"><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="center">Your Ref./Order No. (if any):</td>
    <td align="center"><input type="text" name="custordnum" id="Customer Ref./Order No." /></td>
  </tr>
  <tr>
    <td align="center">Any additional comments:</td>
    <td align="center"><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" />
    <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>

PHP script (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 "Okey! We Are Proceed. Thank You !";
else
	echo "Sorry We Can't Proceed, Please Try After Some Time!";
?>
</BODY>
</HTML>

Use the onSubmit attribute in the <form> element

e.g.

<form id="form1" name="form1" method="post" action="sendform.php" onSubmit="return validateForm()">

Now add you validation code in the js function validateForm() and return true or false. If true is returned than the form is submitted, if false is returned than the form is not submitted

The js function would be something like this

<script language="javascript">
  <!--
	function validateForm(){
		
		if(<your validation condition>){
			//validation successful

			return true; //will submit the form
		}
		else{
			//validation failed

			return false; //will not submit the form
		}


	}
  //-->
  </script>
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.