AJAX Form Submission - "Return False" & "preventDefault" not working

Question

I am using a form submission tool to get information from an API. The server I'm connecting to is notorious for timeouts - so I have the submission on a jQuery timer, with a "check" system to make sure I'm not already waiting on the server to respond to another request.

The problem I'm having is that I can't get the triggered .submit() to NOT reload the page. No matter how many return false; or event.preventDefault()'s I use - either the form never submits or the page reloads.

Cheers.

jQuery(document).ready(function() {

    setInterval(function() {

        var check = jQuery('div#go').length;

        var count = parseInt(jQuery('h3.timer').html());

        count++;

        jQuery('h3.timer').text( count );

        if ( check ) {

            //alert( 'running' );

            jQuery( 'form#woowps_next_page' ).submit(function(event) {

                event.preventDefault()

                jQuery('div#go').remove();

                jQuery.ajax({
                    type: "POST",
                    url: '/wp-content/plugins/wps-woo/inc/category_repair_ajax.php',
                    data: jQuery("form#woowps_next_page").serialize(),
                    success: function(data) {

                        alert( 'win' );

                        var current_page = jQuery('input.woowps_next_page').val();

                        jQuery( 'h3#repair_update' ).text( 'Category Pages Updated:' + current_page );

                        jQuery( 'div#woowps_entry' ).html(data); // show response from the php script.

                        jQuery( '<div id="go"></div>' ).appendTo('div#woowps_entry');

                    },

                        error: function( data ) {

                        alert( 'lose' );

                         var current_page = jQuery('input.woowps_next_page').val();

                        jQuery( 'h3#repair_update' ).text( 'Category Pages Updated: ' + current_page );

                        jQuery( '<div id="go"></div>' ).insertAfter('div#woowps_entry');

                        jQuery('h3.timer').text( '0' );

                    }

                });

            });

        }

    }, 1000);

});

Answer 1

Fixed! I'm having a problem with the return. Which is good because I've solved the issue! I didn't know you don't have to .submit() data to POST it through AJAX. I kept my timer function, because it let's me know when pages get stuck. Here's my answer:

jQuery(document).ready(function() {

    setInterval(function() {

        var check = jQuery('div#go').length;

        var count = parseInt(jQuery('h3.timer').html());

        count++;

        jQuery('h3.timer').text( count );

        if ( check === 1) {

            jQuery('div#go').remove();

            jQuery.ajax({

                type: "POST",
                url: '/wp-content/plugins/wps-woo/inc/category_repair_ajax.php',
                data: jQuery("form#woowps_next_page").serialize(),
                success: function(data) {



                    var current_page = jQuery('input.woowps_next_page').val();

                    jQuery( 'h3#repair_update' ).text( 'Category Pages Updated:' + current_page );

                    jQuery( 'div#woowps_entry' ).html(data); // show response from the php script.

                    jQuery( '<div id="go"></div>' ).appendTo('div#woowps_entry');

                    alert(current_page);

                 },

                 error: function( data ) {

                     alert('lose');

                     var current_page = jQuery('input.woowps_next_page').val();

                    jQuery( 'h3#repair_update' ).text( 'Category Pages Updated: ' + current_page );

                    jQuery( '<div id="go"></div>' ).insertAfter('div#woowps_entry');

                    jQuery('h3.timer').text( '0' );

                 }
          });

        }

    }, 1000);

});

Answer 2

The submit(...) function binds a handler to the submit event of a form. Meaning that the function you give it doesn't run at the time you call submit(...), it will run, when the form is submitted. So bind the function once the document is loaded, but there is no need to bind it every second.

https://api.jquery.com/submit/

To prevent multiple requests from being send you could do this:

jQuery(document).ready(function() {
    var requestSend = false;

    jQuery('form#woowps_next_page').submit(function(event) {
        event.preventDefault();

        if(!requestSend) {
            requestSend = true;

            jQuery.ajax({
                type: "POST",
                url: '...',
                data: jQuery("form#woowps_next_page").serialize(),
                success: function(data) {
                    requestSend = false;
                    // whatever
                },
                error: function( data ) {
                    requestSend = false;
                    // error handling
                }
            });
        }
    });
});