表单提交 js/jquery 停留在同一页面

Question

我正在尝试在 CMS 页面中提交表单，并且不希望在处理 php 邮件脚本后加载新页面。相反，我需要在不重新加载页面或转到其他页面的情况下显示单行成功消息（而不是警报弹出框）。

这是我拥有的代码，我的理解是 event.preventDefault 应该允许留在同一页面上，$("#contactResponse").html(data); 应该将成功消息放在同一页面上。

这是我应该接收成功消息的表单上方的 div 标签（我也尝试将它放在我的表单之后）：

<div id="contactResponse"></div>

这是我的表单标签：

编辑：也包括我的表单代码：（div 类的东西来自其他人所做的自定义 css）

<form id="contactForm" name="contactForm" method="post" action="/myemail.php">

<div class="form-group"><input class="form-control" name="email" type="email" placeholder="Email Address" /></div>
</div>
<div class="col-sm-4">
<div class="form-group"><input class="form-control" name="question" type="text" placeholder="What is your question?" /></div>
</div>
<div class="form-group"><input class="btn btn-warning btn-block" type="submit" value="Request Information"></div>
</form>

这是我的表单和 div 标签上方的脚本：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
    $("#contactForm").submit(function(event) {
        event.preventDefault();

        var $form = $(this),
             $submit = $form.find('button[type="submit"]'),
             email_value = $form.find('input[name="email"]').val(),
             message_value = $form.find('input[name="question"]').val(),
             url = $form.attr('action');

        var posting = $.post(url, { 
            email: email_value, 
            question: message_value 
        });

        posting.done(function(data) {
            $("#contactResponse").html(data);
        });
    });
</script>

电子邮件有效，但 php 脚本在服务器上，它会将我带到另一个页面。

谁能给我一些建议/建议。

谢谢

Answer 1

试试这个，它对我有用

<script>
  // Get the form.
  var form = $('#contactForm');
  // Get the messages div.
  var formMessages = $('#contactResponse');
  // Set up an event listener for the contact form.
  $(form).submit(function(event) {
    // Stop the browser from submitting the form.
    event.preventDefault();
    // Serialize the form data.
    var formData = $(form).serialize();
    // Submit the form using AJAX.
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData
    }).done(function(response) {
        // Make sure that the formMessages div has the 'success' class.
        $(formMessages).removeClass('error');
        $(formMessages).addClass('success');
        // Set the message text.
        $(formMessages).text(response);
        // Clear the form.
        $('#name').val('');
        $('#email').val('');
        // $('#subject').val('');
        // $('#company').val('');
        $('#message').val('');
        $(form).hide();
    }).fail(function(data) {
        // Make sure that the formMessages div has the 'error' class.
        $(formMessages).removeClass('success');
        $(formMessages).addClass('error');
        $( "#contact" ).children(".loading").remove();
        // Set the message text.
        if (data.responseText !== '') {
            $(formMessages).text(data.responseText);
        } else {
            $(formMessages).text('Oops! An error occured and your message could not be sent.');
        }
    });
</script>