Contact Form Confirmation Message Without Refresh

Question

The contact form I'm using redirects after message has been sent but i would like the user to get a 'Message Sent' alert that would appear & disappears somewhere on the contact form instead. Meaning the page never refreshes nor does the user get taken away from the page or contact form. Is this possible?

If so could someone show me the code i need to add to the current below...

I am using the following form:

<form id="contact-form-face" class="clearfix"      action="http://www.demo.com/php/contactengine.php">
    <input type="text" name="email" value="Email"     onFocus="if (this.value == 'Email') this.value = '';" onBlur="if (this.value == '') this.value = 'Email';" />
    <textarea name="message" onFocus="if (this.value     == 'Message') this.value = '';" onBlur="if (this.value == '') this.value = 'Message';">Message</textarea>
    <input class="contact_btn" name="submit"     type="submit" value="Send Message" />
</form>

And the PHP post:

<?php

$EmailFrom = "myemail";
$EmailTo = "myemail";
$Subject = "";
$Email = Trim(stripslashes($_POST['email'])); 
$Message = Trim(stripslashes($_POST['message'])); 

// validation
$validationOK=true;
if (!$validationOK) { 
    print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
    exit;
}

// prepare email body text
$Body .= "Email: ";
$Body .= $Email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $Message;
$Body .= "\n";

// send email 
$success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>");

// redirect to success page 
if ($success){
   print "<meta http-equiv=\"refresh\"   content=\"0;URL=contactthanks.php\">";
}
else{
   print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
}
?>

Any help would be greatly appreciated

Answer 1

You can use the below link to prepare your form. Simple Ajax Form Using Javascript No jQuery

Once its prepared, you can use the responseText to check if the success status is returned and then can display the message accordingly on the same page without refresh.

Edit:

In HTML

<form id="contact-form-face" onSubmit="AJAXPost(this.id); return false;" class="clearfix" action="http://www.demo.com/php/contactengine.php">

In php file

if($success){
echo 1;
}else{
echo 0;
}

This could be your javascript function to which to will pass your form-Id.

function AJAXPost(formId) {
var elem   = document.getElementById(formId).elements;
var url    = document.getElementById(formId).action;        
var params = "";
var value;

for (var i = 0; i < elem.length; i++) {
    if (elem[i].tagName == "SELECT") {
        value = elem[i].options[elem[i].selectedIndex].value;
    } else {
        value = elem[i].value;                
    }
    params += elem[i].name + "=" + encodeURIComponent(value) + "&";
}

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",php_post_url.php,false);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
if(xmlhttp.responseText == 1){
alert('Successfully Submitted');
}else{
alert('Something Went Wrong. Please try again.');
}
}