Renso Hollhumer

Goal: Intercept a form submit, find out what submit button was clicked/invoked and decide to prevent the submission or continue to submit.

Solution:

$(document).ready(function() {
    $("form").submit(function(e) {
        if (e.originalEvent.explicitOriginalTarget.id == "myButton") {
            if (some status is true continue to submit the form)
                return true;
                //If the status above is false continue to prompt the user if they want to submit or not
            var ok = confirm('Do you really want to save your data?');
            if (ok) {               
                return true;
            }
            else {
                //Prevent the submit event and remain on the screen
                e.preventDefault();
                return false;
            }
        }
    });

    return;
});

• Share This Post:
• 
• 
• 

Scenario: The user wants to save something and hits the Save button (type=submit). The event performs an Ajax call to send the request to the server. The user, being unaware or not sure if their request is being processed or if they clicked the Save button properly, click it again, and again, causing several Ajax requests, which could be a real problem, if the update is to, for example, transfer funds to your ex-girlfriend's account

The solution: Prevent the user from being able to click the Save button or to when they do to ignore it.

$(document).ready(function() {
    $("form").submit(function(e) {
        if ($('form').valid()) {
            $(':submit', this).each(function() {
                if ($(this).attr('value') == 'Save') {
                    $(this).attr("disabled", "disabled").val("Saving....");
                }
            });
        }
    });
});

Couple of pointers:

• The button being pressed is of type submit
• The attr of the button gets disabled so the user cannot hit it again and again, and since the form is submitted there is no need for enabling it again.
• In this example I have also overridden the value of the button to indicate that the form is being saved
• In this example all submit buttons are impacted ($(':submit', this))

If you want to target only a specific button:

$(document).ready(function() {
    $("#myButton").submit(function(e) {
        $('#myButton', this).attr("disabled", "disabled").val("Processing....");
    });
});

Oops, this does not work!!!!!!!!!!!!!!!!

The reason being is that the submit action is attached to the form not the "myButton". In order to perform the above and find out which button was pressed and take appropriate action do:

    $("form").submit(function(e) {
        if (e.originalEvent.explicitOriginalTarget.id == "myButton") {
            //Do something
        }

    });

• Share This Post:
• 
• 
•