JQuery POST function

Question

I am using this JQuery function to post forms:

function SubmitForm(form, postaction) {
    $(form).submit(function(event){
        $('#LoadingDiv').show();
        var data = $(this).serialize();
        $.post(postaction, data)
        .success(function(result){
            console.log(result);
            $('#LoadingDiv').hide();
            $('.tabcontent').html(result);
            $("html, body").animate({ scrollTop: 0 }, "slow");
        })
        .error(function(){
            $('.tabcontent').html('Error Loading Page');
            $("html, body").animate({ scrollTop: 0 }, "slow");

            console.log('Error loading page');
        })
        return false;
    });
}

I have the buttons on the forms like:

<input type="submit" onclick="SubmitForm('#SearchHistoricInvoices', '/billing/viewhistoricinvoices.php');" value="Search" />

and the form tag:

<form method="post" id="SearchHistoricInvoices">

but when submitting the form using the above button, it just seems to refresh the whole page and not actually submit the form

i have checked the console, and there are no errors

Answer 1

You should be using the function directly instead of calling inside another function.

$('#SearchHistoricInvoices').submit(function(event){
            event.preventDefault()
            $('#LoadingDiv').show();
            var data = $(this).serialize();
            $.post($(this).prop('action'), data)
            .success(function(result){
                console.log(result);
                $('#LoadingDiv').hide();
                $('.tabcontent').html(result);
                $("html, body").animate({ scrollTop: 0 }, "slow");
            })
            .error(function(){
                $('.tabcontent').html('Error Loading Page');
                $("html, body").animate({ scrollTop: 0 }, "slow");

                console.log('Error loading page');
            })
            return false;
        });

Try using jQuery event.preventDefault() in first line as mentioned here.

Your code should be like this

    function SubmitForm(form, postaction) {
        $(form).submit(function(event){
            event.preventDefault()
            $('#LoadingDiv').show();
            var data = $(this).serialize();
            $.post(postaction, data)
            .success(function(result){
                console.log(result);
                $('#LoadingDiv').hide();
                $('.tabcontent').html(result);
                $("html, body").animate({ scrollTop: 0 }, "slow");
            })
            .error(function(){
                $('.tabcontent').html('Error Loading Page');
                $("html, body").animate({ scrollTop: 0 }, "slow");

                console.log('Error loading page');
            })
            return false;
        });
    }

This will stop the default submit event and will use jQuery post to send request.

Answer 2

The issue is because you only attach the form submit handler after the form has been submit. Change your logic to use jQuery event hooks and it becomes much simpler and neater. Try this:

<form method="post" id="SearchHistoricInvoices" action="/billing/viewhistoricinvoices.php">
    <!-- other inputs -->
    <input type="submit" value="Search" />
</form>

$('#SearchHistoricInvoices').submit(function(event) {
    event.preventDefault();
    $('#LoadingDiv').show();
    $.post($(this).prop('action'), $(this).serialize()).success(function(result){
        console.log(result);
        $('#LoadingDiv').hide();
        $('.tabcontent').html(result);
        $("html, body").animate({ scrollTop: 0 }, "slow");
    }).error(function(){
        $('.tabcontent').html('Error Loading Page');
        $("html, body").animate({ scrollTop: 0 }, "slow");
        console.log('Error loading page');
    })
});