Question

问题吗

我有一个问题，我不能使用普通的HTML POST，因为它刷新我的网页导致JS控制'Tab'关闭。因此，强制用户重新打开选项卡以查看提交表单的反馈。

如何运作

用户将他们的数据输入表单，然后单击“提交”，表单将数据发送给自己，通过电子邮件将数据发送到电子邮件地址。一旦发送数据，消息应该替换表示电子邮件已发送的表单。（所有没有包含表格结尾的标签）

Sudo Code

If (email) is complete
    {Send Email} 

echo "thank you for for your email"

}else{

Display email form

我正在尝试的解决方案？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script><script>

$('#form1').submit(function(e)
{
e.preventDefault();
 $.ajax({
     type: 'POST',
     url: 'indextest2.php',
     data: $("#form1").serialize(),
     success: function(response) {

     }
   });
});
</script>

现在这会很棒，因为它会停止页面刷新并发送电子邮件但它会停止“谢谢你发送消息已经发送”html来替换表单。

因此，对于所有意图和目的，用户不知道电子邮件是否已经发送，因为表单仍然显示他们输入的数据。

可能的解决方法？

以某种方式获取ajax帖子将“谢谢”消息插入ajax帖子成功的正确div？！这可能吗？

或者我做错了什么，实施明智？！

实际代码我正在使用

 <div id="tabsContainer">
    <div class='tab one'>
      <ul>
        <li><a href="#contact-form">Inquiry Form</a></li>
      </ul>
    </div>
    <div class='content one'>
      <div id="contact-form" class="clearfix">
        <?php

  if ($_POST["email"]<>'') { 
$ToEmail = 'dancundy@hotmail.com'; 
$EmailSubject = 'EasyScrap Enquiry'; 
$mailheader = "From: ".$_POST["email"]."\r\n"; 
$mailheader .= "Reply-To: ".$_POST["email"]."\r\n"; 
$mailheader .= "Content-type: text/html; charset=iso-8859-1\r\n"; 
$MESSAGE_BODY = "Name: ".$_POST["FName"]."&nbsp;";
$MESSAGE_BODY .= $_POST["SName"]."<br>";
$MESSAGE_BODY .= "Tel: ".$_POST["CTNumber"];
$MESSAGE_BODY .= "<br>"."email: ".$_POST["email"].""; 
$MESSAGE_BODY .= "<br>"."Address: ".$_POST["STName"]." ".$_POST["PCode"];
$MESSAGE_BODY .= "<br>"."Comment: ".nl2br($_POST["Comment"]).""; 
mail($ToEmail, $EmailSubject, $MESSAGE_BODY, $mailheader) or die ("Failure"); 
?>
        <h3>Contact Us</h3>
        <P>Your message was sent, thank you! You will recieve an automated response within the next few minutes and will hear back from a Plymouth Easy Scrap representive shortly.</P>
      </div>
    </div>
  </div>
  <?php 
  }else{
      ?>
  <fieldset>
    <legend>
    <h3>Contact Us</h3>
    </legend>
    <div id="contact-area">
      <form id="form1" method="post" action="">
        <label for="FName">Name:*</label>
        <input name="FName" type="text" required placeholder="Enter your name" />
        <label for="SName">Surname:</label>
        <input name="SName" type="text" placeholder="Enter your surname" />
        <label for="STName">Street:</label>
        <input name="STName" type="text" placeholder="Enter the address" />
        <label for="PCode">PostCode:</label>
        <input name="PCode" type="text"placeholder="UK Postcode" />
        <label for="Email">Email:*</label>
        <input type="email" name="email"  required placeholder="Enter a valid email address"/>
        <label for="CTNumber">Contact:</label>
        <input name="CTNumber" type="text" placeholder="Enter a contact number"/>
        <label for="comment">Message:</label>
        <br/>
        <textarea name="Comment" rows="20" cols="20" id="Message"></textarea>
        <input type="submit" name="submit" value="Submit" class="submit-button" />
      </form>
      <div style="clear: both;"></div>
    </div>
    <div class="FormInfo">
      <p>&nbsp;</p>
      <p>*Denotes a required field</p>
    </div>
  </fieldset>
  <?php
  };
  ?>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script><script>

$('#form1').submit(function(e)
{
event.preventDefault();
 $.ajax({
     type: 'POST',
     url: 'indextest2.php',
     data: $("#form1").serialize(),
     success: function(response) {

     }
   });
});
</script>

以下是实际网站，它可以让您更好地了解我在说“标签”时的含义，并希望更多地扩展问题。

http://www.cundytech.com/SWCF/indextest2.php

带有表格的标签是菜单中的“查询表格”。

我真的希望有人可以帮忙吗？

Answer 1

发送消息后，将表单替换为感谢消息。这可以通过用ajax成功块

中的感谢信息替换包含表单的dom结构来完成

ajax代码：

$('#form1').submit(function(e)
 {
      e.preventDefault();
      $.ajax({
            type: 'POST',
            url: 'indextest2.php',
            data: $("#form1").serialize(),
            success: function(response) {
                // replace the email form with thank you message
                $('#targetForm').html("<div class="info">Thank you for your message !!!<div>");
            }
      });
  });

快乐编码：）

Answer 2

<强>解决方案

@deamweiver发布的解决方案很有效。使用ajax post函数的Success部分，我能够在成功发布表单数据后换出表单以获得感谢信息。

这是需要的代码

('#form1').submit(function(e)
{
e.preventDefault();
 $.ajax({
     type: 'POST',
     url: 'indextest2.php',
     data: $("#form1").serialize(),
     success: function(response) {
 $('#form1').html("<div class=\"info\">Thank you for your message !!!<div>");
     }
   });
});

Answer 3

你的javascript中的事件是什么？

在您的论证中，您使用事件，并在功能正文中使用 e 。

参数和变量必须相同。

对于您的解决方案，它应该 e 。

以下代码可以帮助您...

$('#form1').submit(function(e)
{
 e.preventDefault();
 $.ajax({
     type: 'POST',
     url: 'indextest2.php',
     data: $("#form1").serialize(),
     success: function(response) {

     }
   });
});

Answer 4

尝试以下事项：

indextest2.php页面：

function index(){
    //Do whatever receiving the data
    if(Your job is done){
        echo "Success";
    }else{
        echo "Error";
    }

}

ajax电话：

$(document).ready(function(){
    $('#form1').submit(function(e){
    e.preventDefault();
    $.ajax({
         type: 'POST',
         url: 'indextest2.php',
         data: $("#form1").serialize(),
         success: function(response) {
              if(response=="Success"){
                  $('#contact-area').html("<div>thank you you message has been sent</div>")
              }else{
                   $('#contact-area').html("<div>Sorry Something went Wrong !</div>")
              }
         },
         error: function (xhr) {
         alert(xhr.responseText);
        console.log(xhr.responseText);
    }
   });
});

您在此处使用的e是在提交表单或点击提交按钮后生成的事件。然后浏览器刷新并转到您在action=""标记中输入的form网址。每当您使用e.preventDefault时，它都会停止表单提交的action，并执行您在e.preventDefault下面编写的代码。通常，人们会使用preventDefault停止在a的{{1}}代码和submit按钮上刷新浏览器。祝你好运。

event.PreventDefault（）和ajax POST方法有什么可能？

4 个答案: