javascript - 表单提交 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>