【问题标题】:PHP/JavaScript Email Contact FormPHP/JavaScript 电子邮件联系表
【发布时间】:2014-06-09 19:29:12
【问题描述】:

我正在尝试使用电子邮件联系表单,默认情况下,在提交邮件后会重定向到另一个页面。但是,我希望在邮件提交后留在同一页面上,但弹出消息告诉发件人邮件已发送但不离开页面。下面是我的 HTML 页面中的 javascript 和我正在尝试使用的 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\">";
}
?>

【问题讨论】:

  • 如果你想留在同一页面上,你应该使用 ajax。
  • @slim 你能举个例子吗?
  • @markkane 检查我的答案,如果您遇到任何问题,请告诉我

标签: javascript php jquery html


【解决方案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>

标签。这很重要,它被粘贴在正文标记之前的行中:)

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

【讨论】:

  • 感谢您的回复-您能告诉我这是什么样子吗,因为我现在只能重新加载提交页面但没有弹出窗口
  • 好的,所以在您的页面上创建了一个隐藏的 in out,其 Id 为 check 和 check 名称,值为 0
  • 很抱歉,但正如您所知,我的知识非常有限 - 您能告诉我这段代码吗?非常感谢
  • 在网页底部没有问题:
  • 好的,我已将其粘贴到我的 HTML 页面中;-)
【解决方案2】:

如果您想留在同一页面上,您应该使用 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,这就是为什么你需要在你的php中使用urldecode

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

【讨论】:

    【解决方案3】:

    做这样的事情:

    <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);
    ?>
    

    【讨论】:

    • 在什么情况下它不起作用?我在这里创建了一个 JSFiddle:jsfiddle.net/scottfreeman/dC4Jb,这可能会有所帮助(请注意,如果您运行它,JSFiddle 示例将不起作用,因为它不执行 PHP 操作)。
    猜你喜欢
    • 2012-07-10
    • 2012-04-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-06-26
    • 2013-07-31
    • 2019-09-04
    相关资源
    最近更新 更多