ajax request page redirecting

Question

I am loading a form named staff_view.php in main.php through ajax. It's loading fine but when I submit form to staff_post.php it's redirecting to it instead of showing in console, before I add the code for loading form using ajax it was posting fine but after it's redirecting.

Here is my code

$(document).ready(function() {            
    $('.content_load').load('staff_view.php');
    $('ul#nav li a').click(function() {
        var page = $(this).attr('href');
        $('.content_load').load(page);
        $('form.ajax').on('submit', function() {
            var that = $(this);
            url = that.attr('action'),     
                type = that.attr('method'), 
                data = {};

            that.find('[name]').each(function(index, value) {            
                var that = $(this),
                    name = that.attr('name'),
                    value = that.val();
                    data[name] = value;
            });

            $.ajax({
               url: url,
               type: type,
               data: data,
               success: function(response){
                   console.log(response);
               }
            });
        });
        clearAll();
        return false;
    });
});

function clearAll(){
    $("form :input").each(function(){
        $(this).val(""); 
    });
}

Answer 1

Because it's a form, and because you wish to submit via AJAX instead of the usual "redirect-to-page" method that forms automatically use, you must suppress the default action.

Change this:

$('form.ajax').on('submit', function(){
    var that = $(this);
    etc.

to this:

$('form.ajax').on('submit', function(e){  // <=== note the (e)
    e.preventDefault();                   // <=== e used again here
    var that = $(this);
    etc.

Answer 2

You need to prevent default action when you click anchor tag, and that is redirects you to the link in your href attribute

$('ul#nav li a').click(function(e){
    e.preventDefault(); 
    var page = $(this).attr('href');
    $('.content_load').load(page);
    // code...

This is what cause your redirection

Answer 3

I could be wrong, but it looks like you might have a race condition to load the page and attach the submit listener. The page might load after the $('form.ajax') bit is executed.

$('.content_load').load(page); // Race condition?
$('form.ajax').on('submit', function() {

One fix would be to move the following code into a completion callback:

$('.content_load').load(page, function() {
    $('form.ajax').on('submit', function(e) {
       e.preventDefault();
       // ...
});

Also, add the e.preventDefault(); to prevent the form from actually submitting.