Disable and Enable submit button in jquery

Question

I am using jquery to disable the submit button and load loading image,

In submit button I am using the folowing :

<div id="registerbtn" name="registerbtn">
<input type="submit" class="btn btn-primary" icon="ok white" value="Register" id="register" name="register"/>
</div>
<div class="span4" style="display:none;" id="loadingtext">
                            <?php echo  $imghtml=CHtml::image('images/loading.gif');?>                      
                        </div>

and in JQuery, I am using following code :

$(document).ready(function() {

    $('#register').click(function() {
        $('input[type="submit"]').attr('disabled','disabled');

     });
        $("#loadingtext").show();
    });
});

When I do this, then this button is disabled permanently, but if I want to remove then what should I do ??

I am using yii to submit this form, when this form is submitted then it is validated, at this time i want to disable this button, if there are errors then I want to enable otherwise, proceed to next view — Rohitashv Singhal
– Rohitashv Singhal, Commented Jan 5, 2013 at 10:24
Possible duplicates: stackoverflow.com/questions/1785071/jquery-remove-attribute stackoverflow.com/questions/1594952/… — Stefan Neubert
– Stefan Neubert, Commented Jan 5, 2013 at 10:24

Roko C. Buljan · Accepted Answer · 2017-10-17 08:05:55Z

17

Use .prop() method and use the $(this) to reference the target element within the callback function

jQuery(function($) {

  const $register = $("#register"),
        $loading = $("#loading");

  $register.on("click", function() {
  
    $(this).prop('disabled', true);
    $loading.show();
    
    setTimeout(function() {
      $register.prop('disabled', false);
      $loading.hide();
    }, 2000);

  });

});

<input id="register" value="Register" type="submit">
<div id="loading" style="display:none;">Wait 2 sec...</div>


<script src="//code.jquery.com/jquery-3.1.0.js"></script>

edited Oct 17, 2017 at 8:05

answered Jan 5, 2013 at 10:32

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

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

4 Comments

Roko C. Buljan Over a year ago

@lord_linus it's not exactly the way you need it but there are all the tips you need! thx! happy coding

Rohitashv Singhal Over a year ago

one more problem, I am getting that by using this, I am not able to submit the data,

Roko C. Buljan Over a year ago

@lord_linus sorry was away, you fixed that issue?

Rohitashv Singhal Over a year ago

,I just fixed the issue but not in the proper way, it was just for work , this is my script` $('#register').click(function() { $("#registerbtn").hide(); $("#loadingtext").show(); });and this is my div <div id="registerbtn"> <input type="submit" value="Send Instruction" id="register" name="register"/> </div> <div class="form-actions" style="display:none;" id="loadingtext"> <input type="submit" class="btn btn-primary" icon="ok white" value="Send Instruction" id="register" disabled="disabled"/><?php echo $imghtml=CHtml::image('images/loading.gif');?> </div>`

PhoneixS · Accepted Answer · 2015-06-12 09:53:30Z

10

This is answered in the jQuery FAQ

How do I disable/enable a form element?
There are two ways to disable/enable form elements.

Set the 'disabled' attribute to true or false:

 // Disable #x
 $('#x').attr('disabled', true);
 // Enable #x
 $('#x').attr('disabled', false);

Add or remove the 'disabled' attribute:

 // Disable #x
 $("#x").attr('disabled', 'disabled');
 // Enable #x
 $("#x").removeAttr('disabled');

Update: Now the way to do it (as said by FAQ) is only:

// Disable #x
$( "#x" ).prop( "disabled", true );

// Enable #x
$( "#x" ).prop( "disabled", false );

edited Jun 12, 2015 at 9:53

PhoneixS

11.1k8 gold badges62 silver badges75 bronze badges

answered Jan 5, 2013 at 10:21

Olaf Dietsche

74.4k9 gold badges113 silver badges214 bronze badges

Comments

PassKit · Accepted Answer · 2013-01-05 10:22:22Z

0

To permanently remove the button

$('#register').remove();

To restore the button

$('#register').attr('disabled',false);

answered Jan 5, 2013 at 10:22

PassKit

12.6k5 gold badges60 silver badges78 bronze badges

Comments

Ignacio Correia · Accepted Answer · 2013-01-05 10:22:46Z

0

Is $('#divID').remove(); what you're looking for?

http://docs.jquery.com/Manipulation/remove

answered Jan 5, 2013 at 10:22

Ignacio Correia

3,6988 gold badges42 silver badges68 bronze badges

1 Comment

Rohitashv Singhal Over a year ago

actually I want to enable the button again if I am getting any error in the registration

Mosam Prajapati · Accepted Answer · 2020-08-05 09:54:50Z

0

Enable disabled properties

 $('#apply-coupon').removeAttr('Disabled');

Disable disabled properties

$('#apply-coupon').attr('disabled', 'disabled' );

answered Aug 5, 2020 at 9:54

Mosam Prajapati

3093 silver badges7 bronze badges

Collectives™ on Stack Overflow

Disable and Enable submit button in jquery

5 Answers 5

4 Comments

Comments

Comments

1 Comment

Enable disabled properties

Disable disabled properties

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

1 Comment

Enable disabled properties

Disable disabled properties

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related