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>

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

1 个答案: