CODEWITHSUNDEEP
javascriptjquery
Asynchronous
Asynchronous

Reputation: 3977

JQuery Button disabled on click after being enabled in reference to values in form fields

I am very new to JQuery: I am a little perplexed to ask but asking is better than the alternative:

I am trying to disable a button but enable it when something is in the field/textbox. This is simply experimental, just getting my feet wet here.

Alternatively I could disable the button on windows load or apply the attribute directly on the form element.

$(document).ready(function() {

 $('#btnSubmit').attr('disabled', true);

$('#myForm :input').blur(function(){
    if($('#myField').val() == '')
    {
        $('#btnSubmit').attr('disabled', true);
    }
    else
    {
        $('#btnSubmit').attr('disabled', false);
    }
});
});

The problem is after I enter a value and leave the field the button is enabled but as soon as I click the button it is disabled again:

What am I missing?

Thanks my friends.

Upvotes: 0

Views: 6468

Answers (5)

Pbk1303
Pbk1303

Reputation: 3802

You can try this,onkeyup check if the textbox is empty is so disbale the button , else enable the button.

HTML:

 <form id="myForm">
       <input id="myField" type="text"/>
       <input id="btnSubmit" value="hi" type="button"/>

  </form>

jQuery:

$(document).ready(function() {
        //Load with button disabled,since the value of the textbox will be empty initially
        $('#btnSubmit').attr('disabled', true);
        //onkeyup check if the textbox is empty or not
        $('#myForm input[type="text"]').keyup(function(){
           if($('#myField').val() == '')
             {
               $('#btnSubmit').prop('disabled', true);
             }
            else
            {
               $('#btnSubmit').prop('disabled', false);
            }
           });
          });


$(document).ready(function() {
     $('#btnSubmit').prop('disabled', true);
    $('#myForm input[type="text"]').keyup(function(){
       if($('#myField').val() == '')
         {             
           $('#btnSubmit').prop('disabled', true);         
         }
        else
        {
           $('#btnSubmit').prop('disabled', false);
        }
       }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
         <input id="myField" type="text"/>
         <input id="btnSubmit" value="hi" type="button"/>

      </form>

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

It is because the button is also considered an input field.

Try

$('#myForm :input:not(:button)').

Demo: Fiddle

Also use .prop() instead of .attr() to set disabled state

Upvotes: 2

pixelbyaj
pixelbyaj

Reputation: 1178

$('#myForm:input').on('keyup' , function() {

    if($.trim($('#myField').val()).length > 0){
       $('#btnSubmit').prop('disabled', false);
    }
    else {
       $('#btnSubmit').prop('disabled', true);
    }

});

*This would work. Please try*

Upvotes: 0

Nesmar Patubo
Nesmar Patubo

Reputation: 74

Try this one, this should work

HTML sample

<input type = "text" id = "txt1">
<button class = "btnSubmit">Submit</button>

And the jquery

$(".btnSubmit").attr("disabled", "disabled");
$("#txt1").keyup(function() {
    if(jQuery.trim($(this).val()) != '') {
       $('.btnSubmit').removeAttr('disabled');
    }
});

Upvotes: 0

phirschybar
phirschybar

Reputation: 8579

try using this:

$('#btnSubmit').attr('disabled', 'disabled'); // to disable buttons
$('#btnSubmit').removeAttr('disabled'); // to enable them

Upvotes: 0

Related Questions