Submit a Form without Leaving Page

Question

I am working on a survey that will go at the bottom of a FAQ page. My problem is that everytime a form is submitted, it sends you to a different page. I was wondering - is there a way to submit the form and have a little message that replaces the survey that says "Thanks for your feedback" instead of sending the user to another page or refreshing the page?

So far, I have a file that contains the HTML form, CSS, and jQuery and another file that contains the PHP connection to database and insertion of data to the database.

I would appreciate an explanation that is dumbed-down and an example would help since I am relatively new to programming.

An important note: My jQuery is set up to automatically submit if a user answers very helpful/extremely helpful. If not, two more questions appear below with a submit button at the bottom.

More specifically it looks like this:

$(document).ready(function() {
    $('.rating').click(function() {
    $('.rating').removeClass('selected');
    ratingClick(this);
});
});

function ratingClick(that) {
console.log(that.id);
    if (that.id == 'rating4' || that.id == 'rating5') {
        //$('#questions').fadeOut('slow');
        //$('#thankYou').fadeIn('slow');
        $('#questions').submit();
    } else {
        $('#getMore').fadeIn();
        $(that).toggleClass('selected');
    }
}

$(document).ready(function() {
$('#submit').click(function(){
    //$('#questions').fadeOut('slow');
    //$('#thankYou').fadeIn('slow');
});
});

Answer 1

Alex,

from the code you supply, the reason for leaving the page is due to the fact that you don't preventDefault() on the click event. Your page will always reload after that submit unless you take abortive action. No guarantees, but try a quick refactor to:

$(document).ready(function() {
    $('#submit').click(function(e){
        e.preventDefault();
        //$('#questions').fadeOut('slow');
        //$('#thankYou').fadeIn('slow');
    });
});

This should get you a stage closer. You then just have the ajax logic to define, which should come good with a quick search to match your needs.

Answer 2

What you want is the jquery post function: http://api.jquery.com/jQuery.post/

Make sure your data is JSON.

$("#formdiv").click(function(){
     $.post("somepage",{ yourformdata} ); 
     $("#formdiv").replacewith("Thanks for filling out the form!");
}); 

You can use the replaceWith function to replace the desired content with the thankyou message.