成功返回原始页面消息。Boostramp + PHPMailer

Question

我试图做到这一点，以便当用户输入我的联系表单而不是被重定向到“mail.php”文件时，他们只会显示一条消息，表明该消息已在同一页面上成功发送。我已经尝试了很多 JS 教程，但我仍然不知道如何做到这一点。PHP Mailer 和 Html 可以工作，只是用于向用户显示成功或失败消息的 javascript 不起作用。我最初尝试将 JS 放在不同的文件中，然后在 jQuery 下面的页面底部将其作为不同的脚本调用，但这不起作用，我可能会将其移回到自己的文件中。我的 HTML 目前看起来像<div class="form-container">    <form id="contact-form" method="post" action="mail.php" name="contact-form" role="form" >        <div class="row">            <div class="col-md-6" style="padding-right: 4px;">                <input type="text" name="first_name" id="name" placeholder="Name" required />            </div>            <div class="col-md-6" style="padding-left: 4px;">                <input type="email" name="email" id="email" placeholder="Email" oninvalid="this.setCustomValidity('Please enter valid email address.')" onchange="this.setCustomValidity('')" required />            </div>        </div>        <input type="text" name="subject" id="subject" placeholder="Why are you contacting me?" required />        <textarea name="message" id="message" cols="30" rows="10" placeholder="Tell me more about your propersition?" required></textarea>        <input type="submit" id="submit" name="submit" value="submit">            <label class="checkbox-label">                <input type="checkbox" id="tos" name="tos" oninvalid="this.setCustomValidity('Please read the Terms of Service.')" onchange="this.setCustomValidity('')" required>                <span class="checkbox-custom rectangular"></span>            </label>            <label for="tos">I agree to the <a href="tos.php">Terms of Service</a></label>    </form></div>它主要是从网上复制的，但我实际上并不需要验证器，因为它已经在 jQuery 中处理，所以不需要再次完成，我只需要在 contact.php 页面上显示错误/成功消息，而不是显示它重定向到空白页。

Answer 1

这是完整的工作代码。ajax您的和中的问题很少HTML

1. 您需要dataType: json在$.ajax请求中进行设置，因为从 PHP 文件返回的响应是 json 格式。

2. 您的 HTML 不包含任何.messages将显示成功或错误消息的 div

3. 此外，您需要使用此 =>$('#contact-form').submit(function(e){})进行form提交并使用e.preventDefault()它来确保页面在form提交时不会重新加载

我认为您的PHPMailer工作正常并且已经在发送电子邮件。您只需要使用以下 HTML 和jQuery代码，以便成功消息显示在contant.php页面上而不是另一个页面上。

我已经测试了我的代码，localHost并且运行良好，并且还发送了email正确的表单信息。data

jQuery

$(function() {

  $('#contact-form').submit(function(e) {

    e.preventDefault()

    var url = "mail.php";

    //POST values in the background the the script URL

    $.ajax({

      type: "POST",

      url: url,

      dataType: 'json',

      data: $(this).serialize(),

      success: function(data) {

        // data = JSON object that contact.php returns

        // apply success/danger

        var messageAlert = 'alert-' + data.type;

        var messageText = data.message

        // Bootstrap alert box HTML

        var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable" role="alert"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>'

        // If we have messageAlert and messageText

        if (messageAlert && messageText) {

          // inject the alert to .messages div in our form

          $('.form-container').find('.messages').html(alertBox);

          // empty the form

          $('#contact-form')[0].reset();

        }

      },

      error: function(jqXHR, textStatus, errorThrown) {

        console.error('The ajax request failed:' + errorThrown);

      }

    });

    return false;

  })

});

超文本标记语言

<div class="form-container">

  <form id="contact-form" method="post" action="mail.php" name="contact-form" role="form">

    <div class="row">

      <div class="col-md-6" style="padding-right: 4px;">

        <input type="text" name="first_name" id="name" placeholder="Name" required />

      </div>

      <div class="col-md-6" style="padding-left: 4px;">

        <input type="email" name="email" id="email" placeholder="Email" oninvalid="this.setCustomValidity('Please enter valid email address.')" onchange="this.setCustomValidity('')" required />

      </div>

    </div>

    <input type="text" name="subject" id="subject" placeholder="Why are you contacting me?" required />

    <textarea name="message" id="message" cols="30" rows="10" placeholder="Tell me more about your propersition?" required></textarea>

    <input type="submit" id="submit" name="submit" value="submit">

    <label class="checkbox-label">

                <input type="checkbox" id="tos" name="tos" oninvalid="this.setCustomValidity('Please read the Terms of Service.')" onchange="this.setCustomValidity('')" required>

                <span class="checkbox-custom rectangular"></span>

            </label>

    <label for="tos">I agree to the <a href="tos.php">Terms of Service</a></label>

  </form>

  <div class="messages"></div>

</div>

Answer 2

您需要更改一些事情。

1. 如果您不想重定向到 mail.php，请将其从表单的action属性中删除。由于您是通过 JavaScript 注入成功/失败消息，因此添加onsubmit="return false;"以防止页面刷新。

   <form id="contact-form" method="post" action="" name="contact-form" role="form" onsubmit="return false;">

2. messages我看不到HTML 中带有类名的 div 。

Answer 3

1. 添加e.preventDefault()内部

$('#contact-form').on('submit', function (e) {
    e.preventDefault(); // here

1. 添加新的<div>内部<form>标签：

<form id="contact-form" method="post" action="mail.php" name="contact-form" role="form" >
    <div class="messages"></div>