同一页面上的简单联系表成功弹出窗口答案

【问题标题】：Simple contact form success popup on same page同一页面上的简单联系表成功弹出窗口
【发布时间】：2020-05-30 13:32:38
【问题描述】：

我有一个包含contact.html 和mail.php 页面的简单联系表格。单击提交按钮时，我希望在同一页面上成功弹出窗口。也许需要使用ajax。如果有人可以帮助我。非常感谢。

mail.php-

<?php
 $name = $_POST['name'];
 $email = $_POST['email'];
 $recipient = "example@gmail.com";
 $subject = "Contact Form";
 $mailheader = "From: $email \r\n";
 mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
 echo "Thank You!" . " -" . "<a href='form.html' style='text-decoration:none;color:#ff0099;'> Return Home</a>";
?>

contact.html-

<form action="mail.php" method="post" id="custom-form">
 <input type="text" placeholder="Name" name="name" required="">
 <input type="text" placeholder="Email" name="email" required="">
 <button class="btn" type="submit" value="send">Submit</button>
</form>

【问题讨论】：

我建议构建一个默认隐藏的模式。向mail.php发送ajax请求，替换模态内容，最后显示模态。
@Kruspe 你能写 ajax 代码吗？实际上我是 javascript、ajax 和 php 的新手。

标签： javascript php html ajax forms

【解决方案1】：

在contact.html中

<form action="mail.php" method="post" id="custom-form">
  <input type="text" placeholder="Name" name="name" required="">
  <input type="text" placeholder="Email" name="email" required="">
  <button class="btn" type="submit" value="send">Submit</button>
</form>
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-sm modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title processing">Loading...</h4>
      </div>
     <div class="modal-body">
       <p class="repons2"></p>
     </div>
   </div>
</div></div>
<script>
  $('#custom-form').submit(function (e) {
    e.preventDefault();
    var form_data = new FormData($(this)[0]);
    var fa = $(this);
    $('#myModal').modal('show');
    $.ajax({
      url: fa.attr('action'),
      type: 'post',
      data: form_data,
      dataType: 'json',
      success: function (response) {
        $('.repons2').html(response.messages)
        $('.processing').html(response.status)
      }
   });
 });
</script>

在mail.php中

<?php
      $name = $_POST['name'];
      $email = $_POST['email'];
      $recipient = "example@gmail.com";
      $subject = "Contact Form";
      $mailheader = "From: $email \r\n";
      if(mail($recipient, $subject, $formcontent, $mailheader)){
          $status="success send";
          $message= "Thank You!" . " -" . "<a href='form.html' style='text- decoration:none;color:#ff0099;'> Return Home</a>";
      }else{
         $status="fail send";
         $message="sending error";
      }
      $data=[
             "status"=>$status,
             "messages"=>$message
           ]
          echo json_encode($data);
?>

不要忘记加载 jquery 以使 ajax 工作

【讨论】：