在同一页面上提交带有成功/失败警报的联系表答案

【问题标题】：Submit contact form with success/fail alert on same page在同一页面上提交带有成功/失败警报的联系表
【发布时间】：2019-01-09 03:07:09
【问题描述】：

如您在代码中看到的，我有 html、php、js 和 ajax 的联系表。表单填写成功后点击提交，邮件发送成功。但是在同一页面上看不到成功消息。它看到另一页。这是代码。你能帮我我错过了什么或做错了什么。感谢您的帮助。

--- HTML 代码---

<div class="container">
 <div class="row">
  <div class="col-xl-8 offset-xl-2">
   <h1>CONTACT FORM</h1><hr>
   <p class="lead">By filling out the contact form; You may have information about us and current news.</p>
   <form id="contact-form" method="post" action="contact.php" role="form" novalidate="true">
   <div class="messages"></div>
   <div class="controls">
    <div class="row">
     <div class="col-lg-6">
      <div class="form-group">
        <label for="form_name">Full Name *</label>
        <input id="form_name" type="text" name="name" class="form-control" placeholder="Please fill the name field *" required="required" data-error="You must fill the name field">
        <div class="help-block with-errors alert-danger"></div>
       </div>
      </div>
      <div class="col-lg-6"></div>
    </div>
    <div class="row">
     <div class="col-lg-6">
      <div class="form-group">
       <label for="form_email">E-mail *</label>
       <input id="form_email" type="email" name="email" class="form-control" placeholder="Please fill the email field *" required="required" data-error="You must fill the email field">
        <div class="help-block with-errors alert-danger"></div>
       </div>
      </div>
      <div class="col-lg-6"></div>
    </div>
    <div class="row">
     <div class="col-lg-6">
      <div class="form-group">
       <label for="form_subject">Subject *</label>
       <input id="form_subject" type="text" name="subject" class="form-control" placeholder="Please fill the subject field *" required="required" data-error="You must fill the subject field">
        <div class="help-block with-errors alert-danger"></div>
       </div>
      </div>
      <div class="col-lg-6"></div>
     </div>
     <div class="form-group">
      <label for="form_message">Message *</label>
      <textarea id="form_message" name="message" class="form-control" placeholder="Please fill the message field *" rows="4" required="required" data-error="You must fill the message field"></textarea>
       <div class="help-block with-errors alert-danger"></div>
      </div>
      <input type="submit" class="btn btn-success btn-send" value="Submit">
      <p class="text-muted" style="padding-top: 5px;"><strong>*</strong>This field must be fill.</p>
      </div><!-- controls all end -->
     </form><!-- form all end -->
    </div><!-- col-xl-8 offset-xl-2 end -->
   </div><!-- row all end -->
 </div><!-- container all end -->

--- PHP 代码---

$from = '';
$sendTo = 'email@email.com';
$subject = 'New message from contact form';
$fields = array('name' => 'Name', 'email' => 'Email', 'subject' => 'Subject', 'message' => 'Message');

$okMessage = 'Thank you for your message. I will write back soon.';
$errorMessage = 'There is an error while sending message. Please try again later.';

try {if (!empty($_POST)) {
    $emailText = "You have a new message from your contact form\n=====\n";
    foreach ($_POST as $key => $value) {
       if (isset($fields[$key])) {
         $emailText .= "$fields[$key]: $value\n";
       }
    }
    $headers = array('Content-Type: text/plain; charset="UTF-8";',
     'From: ' . $from,
     'Reply-To: ' . $from,
     'Return-Path: ' . $from,
    );
    mail($sendTo, $subject, $emailText, implode("\n", $headers));
    $responseArray = array('type' => 'success', 'message' => $okMessage);
    }
}
catch (\Exception $e) {
  $responseArray = array('type' => 'danger', 'message' => $e->getMessage());
}
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
 $encoded = json_encode($responseArray);
 header('Content-Type: application/json');
 echo $encoded;
} else {
echo $responseArray['message'];
}

--- JS 和 AJAX 代码 ---

$(function () {
  $('#contact-form').on('submit', function (e) {
   if (!e.isDefaultPrevented()) {
    var url = "contact.php";

    $.ajax({
     type: "POST",
     url: url,
     data: $(this).serialize(),
     success: function (data) {
      var messageAlert = 'alert-' + data.type;
      var messageText = data.message;
      var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
      if (messageAlert && messageText) {
       $('#contact-form').find('.messages').html(alertBox);
       $('#contact-form')[0].reset();
      }
     }
    });
    return false;

   }
  })
});

【问题讨论】：

您是否加载了 javascript 文件，如果是，您能告诉我们在哪里以及如何加载吗？
请解释一下 -> “但是在同一页面上看不到成功消息。它看到另一个页面。” 你的意思是你去不同的页面？如果有，是哪一页？
@Archer 是的，你是对的。它将发送至websitename.com/contact.php 在该页面上，我看到“感谢您的留言。我会尽快回信。”
我认为 @RickJelier 是正确的 - 检查您是否正确包含了 javascript。如果有疑问，只需在其中的某处放置一个提醒，当您访问该页面时应该会显示。
@Archer JS 文件已正确添加，但可以看到重定向页面的警报。我不想重定向以显示警报。警报必须与联系表单在同一页面上。

标签： javascript php html ajax twitter-bootstrap

【解决方案1】：

如果我正确理解您的问题，当您提交表单时，您是否被重定向？！为此，我建议您删除操作表单的属性。然后试试这个：

$ ('#contact-form'). On ('submit', function (e) {
e.preventDefault();
e.stopPropagation();
...

你必须声明 e.preventDefault(); 之前检查 if(!event.isDefaultPrevented())

【讨论】：

值得一试，但函数末尾有return false;，所以不需要它（stopPropagation() 不是必需的）。
如果没有加载javascript，html会重定向到contact.php 如果加载了javascript，html不会使用action属性
@RickJelier 你是对的，但是在我们知道 OP 没有包含 js 文件之前，否决票有点苛刻。当您不知道时，没有什么比投票更合适。
@Archer 你是对的，我不应该做出假设。删除了我的反对票
@RickJelier 我正在尽我所能传播 Stack Overflow 想要传达的美好！谢谢：D

【解决方案2】：

感谢大家的帮助和指导解决问题。

首先，我在没有 action="contact.php"

的情况下更改了该行

-- 旧风格 ---

<form id="contact-form" method="post" action="contact.php" role="form" novalidate="true">

-- 新风格 ---

<form id="contact-form" method="post" role="form" novalidate="true">

第二个，我有 jquery-3.3.1.slim.min.js 库，但这个库没有 AJAX 所以我改变它 jquery-3.3.1.min.js

现在，一切正常。

【讨论】：