联系表确认消息而不刷新 [英] Contact Form Confirmation Message Without Refresh

问题描述

我使用重定向消息发出后，但我想用户得到一个已发送邮件，将出现与放警报的联系表格;消失的地方接触形式，而不是上。含义的页面永远不会刷新也不会获取用户带离页面或联系方式。这可能吗？

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?

如果因此可能有人告诉我codeI需要添加到低于当前...

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

我使用的格式如下：

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

任何帮助将大大AP preciated

Any help would be greatly appreciated

推荐答案

您可以使用下面的链接，prepare表单。 使用JavaScript没有jQuery的 简单的Ajax表单

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

在它的prepared，你可以使用responseText的检查，如果返回成功状态，然后可以在同一页面上无刷新显示相应的信息。

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.

编辑：

在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功能，其中会通过你的表单标识。

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.');
}
}

这篇关于联系表确认消息而不刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！