This is doing my head in. I have three drop down lists which are populated from a mysql database, and change when you select a value from the previous drop down list. They are a state, post code and suburb. So when you select state it gives you the post codes for the state and when you select the post code it gives you the suburbs. These are all generating fine but when i send the form for validation and submit it to send a email the id of the suburb field is saying that it is empty even though it contains data. My form is made up an index.php which contains the input, select and combos. The drop down lists for state, post code and suburb are generated from another php file. when it submits it uses a js file to validate the fields and then a mailer.php file to create the email message. the code for the each of the files is listed below. any help would be greatful appreciated am working to a deadline and everything is working without the drop down lists but as soon as i do it all falls apart
index.php
<!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=ISO-8859-1" />
<title>Personal Finance</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="lib/jquery.form.js" type="text/javascript"></script>
<script src="lib/jquery.metadata.js" type="text/javascript"></script>
<script src="lib/jquery.validate.js" type="text/javascript"></script>
<script src="js/store.js" type="text/javascript"></script>
<style type="text/css">
.block { display: block; }
form.cmxform label.error { display: none; }
</style>
</head>
<body>
<form class="cmxform" id="form1" method="get" action="">
<fieldset>
<p>
<label for="age">Are you over 18 years of age? *</label>
<select id="age" name="age" validate="required:true">
<option value=""></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<label for="age" class="error">Please Select One</label>
</p>
<p>
<label for="borrow">How much money would you like to borrow? *</label>
<select id="borrow" name="borrow" validate="required:true">
<option value=""></option>
<option value="Less than $100">Less than $100</option>
<option value="$100 - $250">$100 - $250</option>
<option value="$251 - $599">$251 - $599</option>
<option value="$600">$600</option>
<option value="$601- $2,000">$601- $2,000</option>
<option value="$2,001 - $5,000">$2,001 - $5,000</option>
<option value="As much as i can">As much as i can</option>
</select>
<label for="borrow" class="error">Please Select One</label>
</p>
<p>
<label for="employ">Are you currently employed? *</label>
<select id="employ" name="employ" validate="required:true">
<option value=""></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<label for="employ" class="error">Please Select One</label>
</p>
<p>
<label for="earn">How much do you earn each week (NET), this is after tax, including benefits? *</label>
<select id="earn" name="earn" validate="required:true">
<option value=""></option>
<option value="Less than $250">Less than $250</option>
<option value="$250 - $300">$250 - $300</option>
<option value="$301 - $500">$301 - $500</option>
<option value="more than $500">more than $500</option>
</select>
<label for="earn" class="error">Please Select One</label>
</p>
<fieldset>
<legend>Gender *</legend>
<label for="gender_male">
<input type="radio" id="gender_male" value="m" name="gender" validate="required:true" />
Male
</label>
<label for="gender_female">
<input type="radio" id="gender_female" value="f" name="gender"/>
Female
</label>
<label for="gender" class="error">Please select your gender</label>
</fieldset>
<p>
<label for="fname">First Name *</label>
<input id="fname" name="name" class="required" minlength="2" />
</p>
<p>
<label for="lname">Last Name *</label>
<input id="lname" name="name2" class="required" minlength="2" />
</p>
<p>
<label for="areacode">Area Code *</label>
<input id="areacode" name="name3" class="required" minlength=2 maxlength="2" />
</p>
<p>
<label for="phone">Phone Number *</label>
<input id="phone" name="name4" class="required" />
</p>
<p>
<label for="cemail">E-Mail *</label>
<input id="cemail" name="email" class="required email" />
</p>
<?
echo "State : <font id=state><select>\n";
echo "<option value='0'>============</option> \n" ;
echo "</select></font>\n";
echo "Post Code : <font id=pcode><select>\n";
echo "<option value='0'>==== none ====</option> \n" ;
echo "</select></font>\n";
echo "Store : <font id=store><select>\n";
echo "<option value='0'>==== none ====</option> \n" ;
echo "</select></font>\n";
?>
<script language=Javascript>
function Inint_AJAX() {
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {} //IE
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
try { return new XMLHttpRequest(); } catch(e) {} //Native Javascript
alert("XMLHttpRequest not supported");
return null;
};
function dochange(src, val) {
var req = Inint_AJAX();
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
document.getElementById(src).innerHTML=req.responseText;
}
}
};
req.open("GET", "locale.php?data="+src+"&val="+val);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=tis-620"); // set Header
req.send(null);
}
window.onLoad=dochange('state', -1);
</script>
<p>
<label for="other">Other Details / Comments</label>
<textarea name="about" id="about" rows="10" cols="25"></textarea>
</p>
<p>
<input type="submit" value="Submit" style=" background:#0060a1; color:#FFFFFF; font-size:14px; border:1px solid #0060a1; margin-left:12px" class="submit"/>
<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> form submit succesfully..........</span>
</p>
</fieldset>
</form>
</body>
</html>
locale.php (builds the drop down lists from a mysql database)
<?
$data=$_GET['data'];
$val=$_GET['val'];
$dbname = "pfc";
mysql_pconnect() or die ("Unable to connect to MySQL server");
if ($data=='state') {
echo "<select name=state id=state onChange=\"dochange('pcode', this.value)\">\n";
echo "<option value='0'>Choose a State</option>\n";
$result=mysql_db_query($dbname,"select id,description from states order by description");
while(list($id, $name)=mysql_fetch_array($result)){
echo "<option value=\"$id\" >$name</option> \n" ;
}
} else if ($data=='pcode') {
echo "<select name=pcode onChange=\"dochange('store', this.value)\">\n";
echo "<option value='0'>Select Post Code</option>\n";
$val2=$val;
$val = substr($val,0,2);
$result=mysql_db_query($dbname,"SELECT DISTINCT postcode FROM postcodes WHERE stateid = '$val2'ORDER BY postcode");
while(list($name)=mysql_fetch_array($result)){
echo "<option value=\"$name\" >$name</option> \n" ;
}
} else if ($data=='store') {
echo "<select name=store id=store>\n";
echo "<option value='0'>Select Store</option>\n";
$val2=$val;
$val = substr($val,0,4);
$result=mysql_db_query($dbname,"SELECT id, store FROM stores WHERE postcode= '$val2'ORDER BY store");
while(list($id, $name)=mysql_fetch_array($result)){
echo "<option value=\"$id\" >$name</option> \n" ;
}
}
echo "</select>\n";
?>
store.js
$(function() {
$(".submit").click(function() {
var age = $("#age").val();
var borrow = $("#borrow").val();
var employ = $("#employ").val();
var earn = $("#earn").val();
var haveyou = $("#haveyou").val();
var fname = $("#fname").val();
var lname = $("#lname").val();
var cemail = $("#cemail").val();
var selStore = $("#store").val();
var dataString = 'fname='+ fname + '&lname='+ lname + '&cemail=' + cemail + '&age=' + age + '&borrow=' + borrow + '&earn=' + earn + '&employ=' + employ + '&haveyou=' + haveyou + '&selStore=' + selStore;
alert (dataString);return false;
if(fname=='' || lname=='' || cemail=='' || other=='' || gender=='' || age=='' || borrow=='' || earn=='' || employ=='' || haveyou=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "mailer.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});
mailer.php (creates the mail message and sends)
<?php
$dbname = "pfc";
mysql_pconnect() or die ("Unable to connect to MySQL server");
$result=mysql_db_query($dbname,"SELECT id, store, email, pfcemail FROM stores WHERE ID=11642 ORDER BY store");
while(list($id,$name,$email,$pfcemail)=mysql_fetch_array($result)) {
$var1=$email;
$var2=$pfcemail;
}
//build the mail message for the store
$msg="The details below have been submitted online at the pfc landing page from our digital advertising.\r\n";
$msg.="The sender has been advised that their details have been sent to your store.\r\n";
$msg.="Please contact this customer asap to follow up. Be sure to discuss their specific ID requirements with them.\r\n";
$msg.="All details as per online form:\r\n";
$msg.="\r\n";
$msg.="Name: ".$_POST["fname"]." ".$_POST["lname"]."\r\n";
$msg.="\r\n";
$msg.="Telephone: (".$_POST["areacode"].") ".$_POST["phone"]."\r\n";
$msg.="Email: ".$_POST["cemail"]."\r\n";
$msg.="State: ".$_POST["state"]."\r\n";
$msg.="Post Code: ".$_POST["pcode"]."\r\n";
$msg.="Store: ".$_POST["store"]."\r\n";
$msg.="Additional Information: ".$_POST["other"]."\r\n";
$msg.="\r\n";
$msg.="Are you over 18 years of age? ".$_POST["age"]."\r\n";
$msg.="How much money would you like to borrow? ".$_POST["borrow"]."\r\n";
$msg.="Are you currently employed? ".$_POST["employ"]."\r\n";
$msg.="How much do you earn each week? ".$_POST["earn"]."\r\n";
$msg.="Have you borrowed money from us before? ".$_POST["haveyou"]."\r\n";
//set up email for store
$recipient=$var1;
$subject="Personal Finance Lead";
$mailheaders="From: User<mail@domain.com> \r\n";
$mailheaders.="Reply-To: ME<mail@domain.com> \r\n";
$mailheaders.="Cc:" $var2" \r\n";
$mailheaders.="Bcc: mail@domain.com \r\n";
//send mail to Store
mail($recipient,$subject,$msg,$mailheaders);
mysql_close($con);
?>