PHP / JavaScript电子邮件联系表格

时间：2014-04-24 13:19:35

标签： javascript php jquery html

我正在尝试使用电子邮件的联系表单，默认情况下，在提交邮件后重定向到另一个页面。然而，我希望在邮件提交后保留在同一页面上，但是弹出消息告诉发件人，而不是邮件已经发送但没有离开页面。以下是我的HTML页面中的javascript＆amp; PHP我试图使用。

任何人都可以解释我所缺少的东西吗？该怎么办？

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

3 个答案:

答案 0 :(得分：1)

好的，所以我觉得你应该试试这个！

首先运行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>

修改

将您添加的代码更改为下面的代码我忘了在lol中添加一行

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

答案 1 :(得分：1)

如果你想留在同一页面，你应该使用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
    }
});

您需要{php}脚本中的decode变量。

我不是php开发人员，但您的代码应如下所示：

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

在.$ajax通话中，我对字符进行了编码，因此您可以转移UTF-8，这就是您需要在php中使用urldecode的原因。

要使用上述代码，请不要忘记在项目中加入jquery库。

答案 2 :(得分：0)

做这样的事情：

<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);
?>
相关问题
最新问题