不刷新的联系表确认消息

Question

我正在使用的联系表单在发送消息后会重定向，但我希望用户收到一个“消息已发送”警报，该警报会出现并消失在联系表单的某个位置。这意味着页面永远不会刷新，用户也不会离开页面或联系表单。这可能吗？

如果是这样，有人可以告诉我我需要添加到当前下面的代码...

我正在使用以下表格：

<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>

还有 PHP 帖子：

<?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\">";
}
?>

任何帮助将不胜感激

Answer 1

您可以使用以下链接准备表格。 Simple Ajax Form Using Javascript No jQuery

一旦准备好，您可以使用responseText检查是否返回成功状态，然后可以在同一页面上相应地显示消息而无需刷新。

编辑：

在 HTML 中

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

在php文件中

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

这可能是您的 javascript 函数，将向其传递您的表单 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.');
}
}