Trap Ajax form submit event

Question

In the WordPress theme my client is using the contact form is submitted via Ajax.

Form Markup

<form action="#" method="post" id="contactform">

    <input type="text" class="required" name="name" id="name" />
    <button name="send" type="submit" id="submit">Send</button>

    <div id="success"></div>
    <div id="failure"></div>

</form>

contact_form.js

(function ($) {

    function themeContactForm() {

        function start() {
            //binds the form elements here
        }


        function submit(e) {
            //check for form validation
            return false;
        }

        function send(data) {
            jQuery.post(
                ajaxurl,
                {
                    action : 'themeContactForm',
                    data : data
                },
                result
            );
        }

        function result(response) {
             if(response.success) {
                  //show success message
             } else {
                 //show failure message
             }    
        }

        start();
    }


    $.fn.themeContactForm = function() {

    };

}(jQuery));

app.js

$("#contactform").themeContactForm();

Issue : After clicking submit, response of success or failure takes around 3-4 secs to appear. During that time users probably think nothing is happening and they click submit again. As a result multiple copies of the same form data is received.

Question : Without touching any of the above mentioned files, is it possible to show a "spinner" when submit is clicked and hide it when the success or failure messages comes from the script, so the user know that the form is being processed.

I can modify contact_form.js and get my job done, but on theme update modifications will be lost.

I have tried binding to ajaxComplete event, but somehow can't get it to work.

$( document ).ajaxComplete(function( event, xhr, settings ) {
         alert("Global event called");  
         console.log( xhr.responseText );
});

But the alert isn't firing at all.

Answer 1

Method: Ajax complete

Edit: I removed the bit about post vs ajax, they both do the same thing.

This should work. Make sure that the listener is being attached to document directly. If it still doesn't work, post your jQuery version.

$(document).ajaxComplete( function(event,jqXHR,ajaxOptions){
    alert('!'); //add the spinner here
});

Method 2: Listen for changes

When the request finishes, something happens to the DOM in result, yes? Listen for it and kill the spinner then.

So: edit: This likely won't work since changing the text doesn't fire an event

$("#success, #failure").one("change",function(){
    alert(!); //kill the spinner
});

If you can't listen for it, use a 100ms timer that check for the existence of some DOM change.

Here is a working example of a timer:

http://jsfiddle.net/slicedtoad/3t3b9q3k/2/

$("#form").on("submit",function(e){ //simulates your ajax request
    window.setTimeout(function(){
        $("#success").text("success");
    },1000)
    return false;
});

$("#form").on("submit",function(){
    $("body").append("<div id='loading'>loading...</div>");
    var intervalID = window.setInterval(function(){
        if( $("#success").text() != "" ){
            $("#loading").remove();
            window.clearInterval(intervalID)
        }
    },100);
    return false;
});