PHP/JavaScript电子邮件联系表

我试图使用电子邮件的联系表格，默认情况下，在提交邮件重定向到另一个页面后。不过，我想在邮件提交后留在同一页面上，但是弹出消息告诉发件人，而不是邮件已发送，但不离开页面。下面是我试图使用的PHP的HTML页面&的JavaScript。PHP/JavaScript电子邮件联系表

任何人都可以解释我失踪&如何做到这一点？

<script type="text/javascript"> 
     $(document).ready(function() { 

      $("#contactFormSubmit").click(function(event) { 
       $.post(“/contactengine.php", $("#contactForm").serialize()); 
       $('#contactFormConfirmation').slideDown(); 
       $('#submitFormReset').click(); 
      }); 

     }); 
    </script> 




<?php 
$EmailFrom = ""; 
$EmailTo = ""; 
$Subject = ""; 
$Name = Trim(stripslashes($_POST['Name'])); 
$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 = ""; 
$Body .= "Name: "; 
$Body .= $Name; 
$Body .= "\n"; 
$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\">"; 
} 
?>

来源

2014-04-24 markkane

Java！= JavaScript –

如果你想留在同一页面上，你应该使用ajax。 – Slim

@slim你能举个例子吗？ – markkane

好吧，我想你应该试试这个！

首先运行PHP脚本，你会发送电子邮件，然后之后加入这一行，在你的PHP脚本的底部

header("Location: http://myurl.com/contact?check=1");

随后联系页面上有一个包含值的隐藏输入0这称为检查，然后使用url参数填充输入框。

在页面加载检查隐藏的输入框的值，看看它的1或0。如果它的1显示一个弹出框，如果它的0加载页面通常

我希望这有助于！

使用此代码

<form id="contactForm" method="post" action="contactengine.php"> 
    <div class="row half"> 
     <div class="6u"> 
      <input type="text" class="text" placeholder="Name" name="Name" /> 
     </div> 
     <div class="6u"> 
      <input type="text" class="text" placeholder="Email" name="Email" /> 
     </div> 
    </div> 
    <div class="row half"> 
     <div class="12u"> 
      <textarea name="message" placeholder="Message" name="Message"></textarea> 
     </div> 
    </div> 
    <div class="row" id="contactFormConfirmation" style="display: none;"> 
     <div class="12u"> 
      <p style="color: white; background-color: #FF3B30;width: 325px;border-radius: 0.25em;padding: .3em;margin: 0 auto;">Thank you for getting in touch!</p> 
      </div> 
    </div> 
    <div class="row"> 
     <div class="12u"> 
      <ul class="actions"> 
        <li> 
         <input type="submit" name="submit" id="contactFormSubmit" class="form-button" value="Submit" /> 
        </li> 
        <li> 
         <input type="reset" name="reset" id="submitFormReset" class="form-button alt" value="Clear" /> 
        </li> 
      </ul> 
     </div> 
     </div> 
    </form> 
    <form name="checkf" id="checkf"> 
     <input name="check" id="check" value="0"> 
    </form>

编辑：

更改您刚才添加到一个下面的代码我忘了在添加一行笑

<script type="text/css"> 
    function fcheckf(){ 
    var x = document.getElementById('check').value; 
    if(x == 0) 
    { 
     return false; 
    } 
    else 
    { 
     alert("Thank you for submitting your data! - This is the pop up box content!"); 
    } 
    } 
</script>

一旦你已经添加了上面的内容，改变你的：

<body>

标签，这样的：

<body onload="fcheckf()">

另一个编辑

现在只是

</body>

标签之前添加此。它是在该行body标签:)

<script type="text/javascript"> 
var data=location.search; 
if(data) { 
data=location.search.substring(1); 
data=data.split('&'); 
var pairs={}; 
for(var i=0; i<data.length; i++){ 
    var tmp=data[i].split('='); 
    pairs[tmp[0]]=tmp[1]; 
    } 
var f = document.checkf; 
for (var i in pairs) { 
    if(f.elements[i]) {f.elements[i].value = pairs[i];} 
    } 
}

编辑56981 V3

使用您的HTML中的这段代码粘贴之前，这是很重要

<script> 
function fcheckf(){ 
var x = document.getElementById('check').value; 
if(x == 0) 
{ 
    return false; 
} 
else 
{ 
    alert("Thank you for submitting your data! - This is the pop up box content!"); 
} 
} 
</script> 
<section id="fourth" class="contact"> 
    <header> 
     <div class="container"> 
      <span class="image-header-contact"><img src="images/contact-header.png" alt="Video" /></span> 
      <h2>Get In Touch</h2> 
     </div> 
    </header> 
    <div class="content style4 featured"> 
     <div class="container small"> 
      <form id="contactForm" method="post" action="contactengine.php"> 
<div class="row half"> 
    <div class="6u"> 
     <input type="text" class="text" placeholder="Name" name="Name" /> 
    </div> 
    <div class="6u"> 
     <input type="text" class="text" placeholder="Email" name="Email" /> 
    </div> 
</div> 
<div class="row half"> 
    <div class="12u"> 
     <textarea name="message" placeholder="Message" name="Message"></textarea> 
    </div> 
</div> 
<div class="row" id="contactFormConfirmation" style="display: none;"> 
    <div class="12u"> 
     <p style="color: white; background-color: #FF3B30;width: 325px;border-radius: 0.25em;padding: .3em;margin: 0 auto;">Thank you for getting in touch!</p> 
     </div> 
</div> 
<div class="row"> 
    <div class="12u"> 
     <ul class="actions"> 
       <li> 
        <input type="submit" name="submit" id="contactFormSubmit" class="form-button" value="Submit" /> 
       </li> 
       <li> 
        <input type="reset" name="reset" id="submitFormReset" class="form-button alt" value="Clear" /> 
       </li> 
     </ul> 
    </div> 
    </div> 
</form> 
<form name="checkf" id="checkf"> 
    <input name="check" id="check" value="1"> 
</form> 
     </div> 
    </div> 
</section> 
    <script> 
     var data=location.search; 
if(data) { 
data=location.search.substring(1); 
data=data.split('&'); 
var pairs={}; 
for(var i=0; i<data.length; i++){ 
var tmp=data[i].split('='); 
pairs[tmp[0]]=tmp[1]; 
} 
var f = document.checkf; 
for (var i in pairs) { 
if(f.elements[i]) {f.elements[i].value = pairs[i];} 
} 
} 
    </script>

来源

2014-04-24 13:24:39 KM123

谢谢你的回应 - 你能告诉我这将是什么样子，因为我只能得到它现在重新加载提交页面，但没有弹出 – markkane

好吧在你的页面上创建了一个隐藏在与支票和支票的名称与检查的ID为0 – KM123

让我知道你什么时候做完了:) – KM123

待办事项像这样：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#contactFormSubmit").click(function(event) { 
      $.post("contactengine.php", $("#contactForm").serialize(), function(data) { 
       $('#contactFormConfirmation').html(data.message).slideDown(); 
      },'json'); 
     }); 
    }); 
</script> 

<?php 

//code to send email here... 
$success = true; 

$result['status'] = "ok"; 
$result['message'] = "Your email has been sent."; 
if (!$success){ 
    $result['status'] = "error"; 
    $result['message'] = "Unable to send your message."; 
} 
echo json_encode($result); 
?>

来源

2014-04-24 13:28:06 scottfreeman

嗨斯科特，我害怕没有工作 – markkane

在什么方式没有工作？我在这里创建了一个JSFiddle：http：///jsfiddle.net/scottfreeman/dC4Jb/这可能会有所帮助（请注意，JSFiddle示例如果运行它不起作用，因为它不会执行PHP的东西）。 – scottfreeman

如果你想留在同一页面，你应该使用ajax。我建议尝试jquery $.ajax调用，因为它似乎更容易。

下面是一个简单的例子：

$.ajax({ 
    url: "pathToThePHPGoesHere", // Here you have to place the path to the php file 
    type: 'GET', 
    data: $.extend({ 
     mailSubject: encodeURI(mailSubjectVar), // 1st variable name and value - you can place the content of your HTML box here 
     mailBody: encodeURI(mailBodyVar) // 2nd variable name and value - you can place the content of your HTML box here 
    }, tJS.getCommonPostData()), 
    dataType: "json", 
    cache: false, 
    success: function (responseText, status, xhr) { 
     alert("Job done!"); // Here is what happens when the request is executed 
    }, 
    error: function (jqXHR, textStatus, error) { 
     tJS.manageError(jqXHR); // show an error message if something goes wrong 
    } 
});

您需要decode在你的PHP脚本中的变量。

我不是一个PHP开发人员，但你的代码应该是这样的：

$mailSubject = urldecode($_POST['mailSubject']); 
$mailBody = urldecode($_POST['mailBody']);

在.$ajax呼叫我已编码的字符，这样你就可以转移UTF-8，这就是为什么你需要使用urldecode在你的PHP。

为了使用上面的代码，不要忘记在项目中包含jquery库。

来源

2014-04-25 14:26:12 Slim

PHP/JavaScript电子邮件联系表

回答

相关问题