Disable form button unless all text input fields are filled in

Question

I have a form that has multiple text inputs, I don't want to add id to each one as they are generated from server side code - number of fields may differ etc. I just want to be able to disable the submit button until there is text entered into each text input.

I have gotten this far, but only disables button until text entered in to one text input field - I want it to stay disabled until text entered in to all text inputs.

 <script> $(function () { $('#button').attr('disabled', true); $('input:text').keyup(function () { $('#button').prop('disabled', this.value == "" ? true : false); }) }); </script>

I have also tried $('input:text').each().keyup(function (){ - but does not make button clickable?

Possible duplicate of stackoverflow.com/questions/23978175/… — Bhavya Shaktawat
– Bhavya Shaktawat, Commented Feb 9, 2015 at 11:14

Sadikhasan · Accepted Answer · 2015-02-09 11:42:50Z

$('#button').attr('disabled', true); $('input:text').keyup(function () { var disable = false; $('input:text').each(function(){ if($(this).val()==""){ disable = true; } }); $('#button').prop('disabled', disable); });

Demo

kontur · Accepted Answer · 2015-02-09 11:17:03Z

The callback function for keyup now checks only that specific input field's value (this.value). Instead, this needs to loop through all input fields that need to be filled, and only when all have text do you change the the .prop value.

$('input:text').keyup(function () { $('#button').prop('disabled', allFieldsAreFilled()); }); function allFieldsAreFilled() { var allFilled = true; // check all input text fields $("#yourForm input:text"]).each(function () { // if one of them is emptyish allFilled is no longer true if ($(this).val() == "") { allFilled = false; } }); return allFilled; }

Jai · Accepted Answer · 2015-02-09 11:33:41Z

Try this:

$(function() { var bool = true, flag = false; $('#button').prop('disabled', bool); // use prop to disable the button $(document).keyup(function() { // listen the keyup on the document or you can change to form in case if you have or you can try the closest div which contains the text inputs $('input:text').each(function() { // loop through each text inputs bool = $.trim(this.value) === "" ? true : false; // update the var bool with boolean values if(bool) return flag; }); $('#button').prop('disabled', bool); // and apply the boolean here to enable }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='text' /> <input type='text' /> <input type='text' /> <input type='text' /> <input type='text' /> <input type='button' id='button' value='button' />

Enter text in last textbox and check what happen? It enabled the the button.

Collectives™ on Stack Overflow

Disable form button unless all text input fields are filled in

3 Answers 3

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Linked

Related