Ok, well the form loads, meaning the 2 text boxes, select and text area. WHat is happening is when I click on the submit button, the form is submitted to itself. The address bar points to contact.php plus the posted inputs.
What I was expecting was text above the form, after the submit button has been pressed to say either that the message was processed fine, or that there were errors which would be displayed in a list.
I have made the tag changes, and fixed a typo in the js file. No difference.
contact.php
<?php
include('db.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=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" />
<script language="javascript" src="contact_form.js"></script>
</head>
<body>
<div class="header">
<div class="banner">
</div>
<div class="menubg">
<div class="menu">
<ul class="menu">
<li class="home"><a href="index.html" class="home">Home</a></li>
<li class="portfolio"><a href="portfolio.html" class="portfolio">Portfolio</a></li>
<li class="misc"><a href="misc.html" class="misc">Miscellaneous</a></li>
<li class="cv"><a href="cv.html" class="cv">CV</a></li>
<li class="contact"><a href="contact.html" class="contact">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="contentbg">
<div class="content">
<p>You may use the form below to contact me, which I will try to respond as soon as possible.</p>
<div id="contact_feedback"> </div>
<form>
<table class="contact">
<tr>
<td width="100px">
<label for="name">Name:</label></td><td width="300px"><input type="text" name="name" size="20" />
</td>
</tr>
<tr>
<td width="100px">
<label for="email">Email Address:</label></td><td width="300px"><input type="text" name="email" size="20" />
</td>
</tr>
<tr>
<td width="100px">
<label for="enquiry">Enquiry Type:</label></td>
<td width="300px"><select name="enquiry">
<?php
$sql="SELECT type FROM tblEnquiryList" or die(mysql_error());
$result=mysql_query($sql);
while($row=mysql_fetch_array($result))
{
echo "<option>";
echo $row['type'];
echo "</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td width="100px">
<label for="enquiry">Your Message:</label></td><td width="300px"><textarea name="message" rows="5" cols="80"></textarea>
</td>
</tr>
<tr>
<td width="100px">
</td>
<td width="300px"><input type="submit" value="Submit" onClick="loadXMLDoc()" /></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
enquiryFormProcessor.php
<?php
include('db.php');
$name=$_POST['name'];
$email=$_POST['email'];
$enquiry=$_POST['enquiry'];
$message=$_POST['message'];
$errors=array();
$sql="SELECT type FROM tblEnquiryList" or die(mysql_error());
$result=mysql_query($sql);
$is_in_list=false;
while($row=mysql_fetch_array($result))
{
if ($enquiry==$row['type'])
{
$is_in_list=true;
}
}
if ($is_in_list==false)
{
$errors[]="Enquiry type given is not valid";
}
if (sizeOf($errors)==0))
{
$response="Thank you for your message.";
}
else
{
$response="The following errors were detected:\n<ul>";
foreach($errors as $error)
{
$response.="<li>$error</li>";
}
$response.="</ul>";
}
echo $response;
?>
contact_form.js
<script type="text/javascript">
function loadXMLDoc()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST","enquiryFormProcessor.php",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
$("contact_feedback").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.send("name=name&email=email&enquirytype=enquirytype&message=message");
}
</script>
