This is a simple ajax form I have found on the Internet. It works well except for the fact that after submitting the form, the form fields information is not cleared. I am running out of ideas and I'd appreciate some guidance. Thank you.
In the code below, the form validation is not important (contact.inc.php). I have not plugged in the necessary info in order to keep the form as simple as possible.
Below are 2 files. Contact.php (has the script and css) and contact.inc.php (validates the form input)
1. Contact.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Simple AJAX Contact Form</title>
<script type="text/javascript">
var http = false;
if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
http = new XMLHttpRequest();
}
function checkform(name, email, subject, content) {
http.abort();
http.open("GET", "contact.inc.php?name=" + name + "&email=" + email + "&subject=" + subject + "&content=" + content, true);
http.onreadystatechange=function() {
if(http.readyState == 4) {
document.getElementById('ajaxresponse').innerHTML = http.responseText;
}
if(http.readyState == 1) {
document.getElementById('ajaxresponse').innerHTML = '<img src="loading.gif" alt="Loading" />';
}
}
http.send(null);
}
</script>
<style type="text/css">
body, td {
font-family: Lucida Grande, Lucida Sans Unicode, sans-serif;
font-size: 12px;
color: #444;
}
input, textarea {
background: #EEE;
border: 1px solid #DDD;
padding: 3px;
color: #666;
font-size: 12px;
font-family: Lucida Grande, Lucida Sans Unicode, sans-serif;
width: 200px;
}
input.button {
width: 100px;
border: 1px solid #CCC;
cursor: pointer;
}
input:hover, textarea:hover {
border: 1px solid #ECFF9F;
background: #FEFEFE;
}
input:focus, textarea:focus {
border: 1px solid #C3DF53;
background: #FEFEFE;
}
div#ajaxresponse {
margin-bottom: 10px;
min-height: 15px;
}
span#error {
color: #CF5A5A;
}
span#success {
color: #6D8F1A;
}
</style>
</head>
<body>
<h2>Simple AJAX Contact Form</h1>
<div id="ajaxresponse"></div>
<form action="" method="post">
<table>
<tr>
<td>Name</td>
<td><input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td>Subject</td>
<td><input type="text" name="subject" id="subject" /></td>
</tr>
<tr>
<td>Message</td>
<td><textarea cols="" rows="" name="message" id="message"></textarea></td>
</tr>
<tr>
<td><input type="reset" value="Reset Form" class="button" /></td>
<td><input type="button" value="Send Message" class="button" onClick="checkform(document.getElementById('name').value, document.getElementById('email').value, document.getElementById('subject').value, document.getElementById('message').value)" /></td>
</tr>
</table>
</form>
</body>
</html>2. Contact.inc.php
<?php
/* CONFIG
----------*/
// WEBMASTERS EMAIL
$target = "jdestruel@example.com";
// WEBMASTERS NAME
$targetname = "Jean-Claude";
// ENABLE SUBJECT PREFIX (true or false)
$subjprefixe = true; // SET TO FALSE TO DISABLE PREFIX
// SUBJECT PREFIX
$subjprefix = "";
/* VARIABLES
-------------*/
$name = $_GET['name'];
$email = $_GET['email'];
$subject = $_GET['subject'];
$content = $_GET['content'];
/* CHECKING DETAILS
--------------------*/
if(empty($name) && empty($email) && empty($subject) && empty($content)) {
echo '<span id="error">Please fill in all fields.</span>';
}
elseif(empty($name)) {
echo '<span id="error">Please enter a name</span>';
}
elseif(empty($email)) {
echo '<span id="error">Please enter an email</span>';
}
elseif(empty($subject)) {
echo '<span id="error">Please enter a subject</span>';
}
elseif(empty($content)) {
echo '<span id="error">Please enter message</span>';
}
elseif(!preg_match( "/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/", $email)) {
echo '<span id="error">Please enter a valid email.</span>';
}
elseif(strlen($name) < 3) {
echo '<span id="error">Your name can not be smaller than 3 characters.</span>';
}
elseif(strlen($email) < 9) {
echo '<span id="error">Your email can not be smaller than 9 characters.</span>';
}
elseif(strlen($subject) < 3) {
echo '<span id="error">Your subject can not be smaller than 3 characters.</span>';
}
elseif(strlen($content) < 20) {
echo '<span id="error">Your message can not be smaller than 20 characters.</span>';
}
else {
/* EMAIL
---------*/
$headers = 'MIME-Version: 1.0' . "rn";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "rn";
$headers .= 'To: ' . $targetname . ' <' . $target . '>' . "rn";
// TARGET EMAIL AS SENDER TO MAKE SURE IT'S NOT IN THE SPAM FOLDER
$headers .= 'From: ' . $name . ' <' . $target . '>' . "rn";
$headers .= 'Reply-To: ' . $name . ' <' . $email . '>' . "rn";
if($subjprefixe == true) {
$subject = $subjprefix . " " . $subject;
}
$message = '
<html>
<head>
<title>' . $subject . '</title>
<style type="text/css">
body, td {
font-family: Lucida Grande, Lucida Sans Unicode, sans-serif;
font-size: 12px;
color: #444;
background: #EEE;
}
</style>
</head>
<body>
<p>
<b>Sender:</b> ' . $name . ' <' . $email . '><br />
<b>Subject:</b> ' . $subject . '<br />
<b>Message:</b><br />' . nl2br($content) . '
</p>
<p>--<br />Message sent at ' . date("d/m/Y H:i:s") . '</p>
</body>
</html>
';
if(mail($target, $subject, $message, $headers)) {
echo '<span id="success">Message Sent</span>';
}
else {
echo '<span id="error">Something went wrong while sending the email.</span>';
}
}
?>Much appreciated