How to enable and disable Twitter Bootstrap Button?

Question

I am trying to achieve the scenario of disabling a button on clicking it, and then enabling it again after the ajax request has completed successfully.

The below is the snippet of my code.

Form

<button id="btnSubmit" type="submit" class="btn btn-warning btn-lg">Submit!</button>

Javascript

$('#resForm').validate({
  // disable submit button
  $('#btnSubmit').prop('disabled', true);

  submitHandler: function(form) {
    $.ajax({
      ..... typical ajax stuff .....
      success: function(data) {
        alert(data);
        $('success').html(data);
        // enable reserve button again
        $('#btnSubmit').prop('disabled', false);
      },
      error: function (jqXHR, textStatus, errorThrown) {
        // console.log(jqXHR);
      }
    });
  }
});

It doesn't work. And checking my console on Chrome tells me Uncaught SyntaxError: Unexpected token (. It feels like it's a stupid mistake somewhere and I can't figure it out. I have read that prop is meant for jQuery 1.6.1 and later and I am on 1.8.3.

Does the error specifies any line?Just try to run in firefox with the help of firebug..it will show you the exact problem — Mothy
– Mothy, Commented Oct 7, 2013 at 8:49

Shashank · Accepted Answer · 2013-10-07 08:55:23Z

10

$('#resForm').validate({


  submitHandler: function(form) {
// disable submit button
  $('#btnSubmit').prop('disabled', true);
    $.ajax({
      ..... typical ajax stuff .....
      success: function(data) {
        alert(data);
        $('success').html(data);
        // enable reserve button again
        $('#btnSubmit').prop('disabled', false);
      },
      error: function (jqXHR, textStatus, errorThrown) {
        // console.log(jqXHR);
      }
    });
  }
});

Try this

answered Oct 7, 2013 at 8:55

Shashank

8301 gold badge6 silver badges14 bronze badges

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

1 Comment

Shashank Over a year ago

see .validate() api it has a definite structure... u cannot add .prop in there...

Community · Accepted Answer · 2017-05-23 12:18:17Z

2

From my answer to another post in SO! I can't think a simpler/easier way! ;-)

For Anchor Tags(Links) :

<a href="#delete-modal" class="btn btn-danger" id="delete"> Delete</a>

To enable the Anchor tag:

 $('#delete').removeClass('disabled');
 $('#delete').attr("data-toggle", "modal");

enter image description here

To disable the Anchor tag:

 $('#delete').addClass('disabled');
 $('#delete').removeAttr('data-toggle');

enter image description here

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Apr 28, 2015 at 9:18

oikonomopo

4,0658 gold badges46 silver badges74 bronze badges

2 Comments

Volodymyr Balytskyy Over a year ago

Hello. I don't quiet understand where to put this code which begins with $. Seriously, I am new to this stuff, can you point me to some resource or just a key words for me to search ? many thanks!

oikonomopo Over a year ago

Inside a js function where you have your desired conditions! Check the if...else statement in Javascript!

4b0 · Accepted Answer · 2013-10-07 09:04:12Z

0

Use http://jsfiddle.net/ to check your code.

Try:

$('#resForm').validate({
  submitHandler: function(form) {
// disable submit button
  $('#btnSubmit').prop('disabled', true);
    $.ajax({
      //..... typical ajax stuff .....
      success: function(data) {
        alert(data);
        $('success').html(data);
        // enable reserve button again
        $('#btnSubmit').prop('disabled', false);
      },
      error: function (jqXHR, textStatus, errorThrown) {
        // console.log(jqXHR);
      }
    });
  }
});

Fiddle with Correction: http://jsfiddle.net/shree/qB9aW/ .JSHint gives you a hint for error.

answered Oct 7, 2013 at 9:04

4b0

22.4k30 gold badges97 silver badges143 bronze badges

Collectives™ on Stack Overflow

How to enable and disable Twitter Bootstrap Button?

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related