聯繫表格確認消息不刷新

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

您可以使用下面的鏈接來準備你的fo R M。 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.'); 
} 
}