Jquery .dialog disable submit button after click

Question

I am customizing a wordpress theme. When the user clicks the submit button it should be disabled.

I was not able to figure out how to do it. Here is the code. Could someone please tell me how to do this.

jQuery('.modal-content').dialog({
                autoOpen: false, 
                title: 'Confirm your Res', 
                resizable: false,
                height: 175,
                width: 300, 
                modal: true, 
                buttons: {
                    Submit: function() {                                    

                        jQuery('form[name="booking-form"]').get(0).submit();
                    }, 
                    Cancel: function() {
                        jQuery(this).dialog("close");

                    }
                }
            });

tano8753 · Accepted Answer · 2013-11-07 16:32:51Z

2

I'm using this code on my website.

$("#dialog-alert").dialog({
    autoOpen: false,
    width: 320,
    modal: true,
    buttons: {
        Submit: function (e) {
            // Disable button
            $(e.target).attr("disabled", true);

            // Write your code here

            // Enable button
            $(e.target).removeAttr("disabled");
        }
    },
});

answered Nov 7, 2013 at 16:32

tano8753

762 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:55:58Z

1

$('.submit').click(function(event) {
 event.preventDefault();
});

or see

Disable submit button on form submit

edited May 23, 2017 at 11:55

CommunityBot

11 silver badge

answered Dec 12, 2012 at 23:18

Christopher Marshall

10.7k10 gold badges57 silver badges95 bronze badges

Comments

Samsquanch · Accepted Answer · 2012-12-12 23:21:53Z

0

This will "disable" the button once the form is submitted:

jQuery('.modal-content').dialog({
            autoOpen: false, 
            title: 'Confirm your Res', 
            resizable: false,
            height: 175,
            width: 300, 
            modal: true, 
            buttons: {
                Submit: function() {                                    
                    jQuery('form[name="booking-form"]').get(0).submit($("form[name='booking-form'] input[type=submit]").attr("disabled", "disabled"));
                }, 
                Cancel: function() {
                    jQuery(this).dialog("close");

                }
            }
        });

answered Dec 12, 2012 at 23:21

Samsquanch

9,17612 gold badges55 silver badges90 bronze badges

Comments

RussGove · Accepted Answer · 2013-07-01 19:19:32Z

0

This will disable all the buttons on the popup once the user clicks the OK button.

  $(popupHtml).dialog({
    title: "Add an Absence",
    width: 750,
    height: 300,
    buttons: {
        "Ok": function () {
            $(this).parent().find('button[role=button]').attr('disabled', 'disabled');
}

}

answered Jul 1, 2013 at 19:19

RussGove

3515 silver badges18 bronze badges

Comments

Thomas Smart · Accepted Answer · 2013-08-02 07:57:19Z

0

you can also include the disabled styling to make them look disabled

buttons: {
    "Ok": function () {
        $(this).parent().find('button[role=button]').attr('disabled', 'disabled').addClass('ui-state-disabled');

Alternatively you could create your own class with a background "loading" animation for example.

answered Aug 2, 2013 at 7:57

Thomas Smart

4165 silver badges10 bronze badges

Collectives™ on Stack Overflow

Jquery .dialog disable submit button after click

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related