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

Question

I'm trying to submit a form inside a CMS page and don't want a new page to load after processing the php mail script. Instead I need to display a single line success message (not an alert pop up box) without reloading the page or going to a different page.

Here's the code I have and my understanding is that the event.preventDefault should allow to stay on same page and $("#contactResponse").html(data); should put the success message on the same page.

This is my div tag above the form which is supposed to receive the success message (I've tried putting it after my form too):

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

This is my form tag:

Edit: Including my form code as well: (The div class stuff is from a custom css that someone else has done)

<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>

This is the script above my form and div tag:

<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>

The email works but the php script is on the server, and it takes me to a different page.

Can someone please give me some suggestions/advice.

Thanks

Answer 1

Try this, it works for me

<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>