disable submit button using jquery

Question

I want to disable submit button in my form once it s clicked to restrict user to click it again and again i tried this with jquery

$('form').submit(function()
{  
    var formId = this.id;
    if (formId != ''){
        $('#'+formId+' :input[type=submit]').attr('disabled',true);
        this.submit();
    }
});

my problem s that i have two submit button s in my page which i m checking in controller to direct but i m not getting any post values once i disable the submit button in my form. Is there any other way to prevent user to restrict multiple clicks ?

possible duplicate of how to disable submit button with jquery — dwitvliet
– dwitvliet, Commented Jul 13, 2014 at 15:23

Abhilash · Accepted Answer · 2012-11-02 12:12:43Z

22

Have an id or a name for the submit button. Disable that button only

For example:

HTML

<form id="frm_name">
     <input type="submit" id="btn_submit" value="Submit" />
</form>

jQuery

...
if (formId != ''){
    $('#btn_submit').attr('disabled',true);
    this.submit();
}
...

answered Nov 2, 2012 at 12:12

Abhilash

1,6109 silver badges19 bronze badges

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

1 Comment

Randy Over a year ago

s this will solve my problem as this s the commonfunction which i want to call all over my app i can call this function in onsubmit of each button with formid and disable field parmeter

immayankmodi · Accepted Answer · 2015-04-16 14:25:28Z

3

In my case $('#btn_submit').prop("disabled", true); worked!

Update:

I was using kendo grid inside some specific rows I want to disable Edit and Delete inline buttons. I tried many alternate ways to disable it but .prop() worked like charm!

edited Apr 16, 2015 at 14:25

answered Apr 16, 2015 at 12:01

immayankmodi

8,63010 gold badges41 silver badges56 bronze badges

1 Comment

Kelderic Over a year ago

This is in the low quality posts queue. I'm voting it looks okay, but you should add some more information about why this works when the OP's attempts didn't.

TechSavy · Accepted Answer · 2019-01-22 11:22:31Z

2

You can also disable the event like this,

$('form').submit(function(e)
{ 

e.preventDefault();
//then carry out another way of submitting the content.

}

edited Jan 22, 2019 at 11:22

TechSavy

1,4303 gold badges23 silver badges50 bronze badges

answered Nov 2, 2012 at 12:22

user1171884

Comments

Abhijit Maji · Accepted Answer · 2022-06-28 10:03:50Z

0

$('#submit_button_1').prop('disabled', true);
$('#submit_button_2').prop('disabled', true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="submit_button_1" value="Submit" />
<button type="submit" id="submit_button_2">Submit</button>

answered Jun 28, 2022 at 10:03

Abhijit Maji

114 bronze badges

Collectives™ on Stack Overflow

disable submit button using jquery

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related