成功返回原始页面消息。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您需要dataType: json在$.ajax请求中进行设置，因为从 PHP 文件返回的响应是 json 格式。您的 HTML 不包含任何.messages将显示成功或错误消息的 div此外，您需要使用此 =>$('#contact-form').submit(function(e){})进行form提交并使用e.preventDefault()它来确保页面在form提交时不会重新加载我认为您的PHPMailer工作正常并且已经在发送电子邮件。您只需要使用以下 HTML 和jQuery代码，以便成功消息显示在contant.php页面上而不是另一个页面上。我已经测试了我的代码，localHost并且运行良好，并且还发送了email正确的表单信息。datajQuery$(function() {&nbsp; $('#contact-form').submit(function(e) {&nbsp; &nbsp; e.preventDefault()&nbsp; &nbsp; var url = "mail.php";&nbsp; &nbsp; //POST values in the background the the script URL&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; url: url,&nbsp; &nbsp; &nbsp; dataType: 'json',&nbsp; &nbsp; &nbsp; data: $(this).serialize(),&nbsp; &nbsp; &nbsp; success: function(data) {&nbsp; &nbsp; &nbsp; &nbsp; // data = JSON object that contact.php returns&nbsp; &nbsp; &nbsp; &nbsp; // apply success/danger&nbsp; &nbsp; &nbsp; &nbsp; var messageAlert = 'alert-' + data.type;&nbsp; &nbsp; &nbsp; &nbsp; var messageText = data.message&nbsp; &nbsp; &nbsp; &nbsp; // Bootstrap alert box HTML&nbsp; &nbsp; &nbsp; &nbsp; 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>'&nbsp; &nbsp; &nbsp; &nbsp; // If we have messageAlert and messageText&nbsp; &nbsp; &nbsp; &nbsp; if (messageAlert && messageText) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // inject the alert to .messages div in our form&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.form-container').find('.messages').html(alertBox);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // empty the form&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#contact-form')[0].reset();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; error: function(jqXHR, textStatus, errorThrown) {&nbsp; &nbsp; &nbsp; &nbsp; console.error('The ajax request failed:' + errorThrown);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; return false;&nbsp; })});超文本标记语言<div class="form-container">&nbsp; <form id="contact-form" method="post" action="mail.php" name="contact-form" role="form">&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; <div class="col-md-6" style="padding-right: 4px;">&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="first_name" id="name" placeholder="Name" required />&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="col-md-6" style="padding-left: 4px;">&nbsp; &nbsp; &nbsp; &nbsp; <input type="email" name="email" id="email" placeholder="Email" oninvalid="this.setCustomValidity('Please enter valid email address.')" onchange="this.setCustomValidity('')" required />&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <input type="text" name="subject" id="subject" placeholder="Why are you contacting me?" required />&nbsp; &nbsp; <textarea name="message" id="message" cols="30" rows="10" placeholder="Tell me more about your propersition?" required></textarea>&nbsp; &nbsp; <input type="submit" id="submit" name="submit" value="submit">&nbsp; &nbsp; <label class="checkbox-label">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" id="tos" name="tos" oninvalid="this.setCustomValidity('Please read the Terms of Service.')" onchange="this.setCustomValidity('')" required>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="checkbox-custom rectangular"></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; <label for="tos">I agree to the <a href="tos.php">Terms of Service</a></label>&nbsp; </form>&nbsp; <div class="messages"></div></div>

Answer 2

您需要更改一些事情。如果您不想重定向到 mail.php，请将其从表单的action属性中删除。由于您是通过 JavaScript 注入成功/失败消息，因此添加onsubmit="return false;"以防止页面刷新。<form&nbsp;id="contact-form"&nbsp;method="post"&nbsp;action=""&nbsp;name="contact-form"&nbsp;role="form"&nbsp;onsubmit="return&nbsp;false;">messages我看不到HTML 中带有类名的 div 。

Answer 3

添加e.preventDefault()内部$('#contact-form').on('submit',&nbsp;function&nbsp;(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();&nbsp;//&nbsp;here添加新的<div>内部<form>标签：<form&nbsp;id="contact-form"&nbsp;method="post"&nbsp;action="mail.php"&nbsp;name="contact-form"&nbsp;role="form"&nbsp;> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="messages"></div>