1

Sorry this might be a duplicate Q , but could not find a direct solution easily,

I have gone through SO answer and found , enable submit if all values are filled , 

$(document).ready(function() {
    $('.field input').keyup(function() {

        var empty = false;
        $('.field input').each(function() {
            if ($(this).val().length == 0) {
                empty = true;
            }
        });

        if (empty) {
            $('.actions input').attr('disabled', 'disabled');
        } else {
            $('.actions input').attr('disabled', false);
        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

But how to achieve the same(enable submit) if atleast one field is non-empty

Improve this question
2
  • Add an else part to if ($(this).val().length == 0) { empty = true; } else { break; } Commented Jan 6, 2020 at 7:18
  • In else part add empty = false and break; Commented Jan 6, 2020 at 7:26

5 Answers 5

Reset to default
4

You can try this:

$(document).ready(function() {
    $('.field input').keyup(function() {
        var hasValue = $('#username,#password').filter((index, input) => input.value.length > 0).length;
    
        $('.actions input').attr('disabled', hasValue ? false : 'disabled');
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

Update:

$('#username,#password').filter((index, input) => input.value.length > 0).length

This line means we will check the value of the 2 input elements username and password, if all of them don't have any value, the button will be disabled. If you want to check another input element before enabling/disabling, you can add:

$('#username,#password,#input_3,#input_4').filter(...).length

By this way, the button will be disabled when username, password, input_3 and input_4 elements don't have any value. Make sure you have a specific id for each input element.

Update 2:

Checking for both username and password have some value:

var hasValue = $('#username,#password').filter((index, input) => input.value.length > 0).length === 2

Checking for field, field4 and field5 have some value:

var hasValue = $('#field,#field4,#field5').filter((index, input) => input.value.length > 0).length === 3
Improve this answer
Sign up to request clarification or add additional context in comments.

13 Comments

This is charm thanks mate, could i achieve the same for multiple fields like ? for example i have 5 inputs , for combinations of 2 and 4 , 3 and 5 .....i need to enable or else still in disable
Does this not present an issue when both fields are filled and then one of the fields is emptied?
Not working. Type in both fields and then clear one input, it again goes to diable. See my answer.
@Codenewbie Yes. You can do the same thing by editting selectors $('.actions input'), just add another line with the specific ids
@Tân could you please provide a basic example for my another question? some random input and select fields , and combinations as asked in comment
|
1

Use jQuery props method.

$(document).ready(function() {
     $(':input[type="submit"]').prop('disabled', true);
     $('input').keyup(function() {
        if($(this).val() != '') {
           $(':input[type="submit"]').prop('disabled', false);
        }else{
          $(':input[type="submit"]').prop('disabled', true);
        }
     });
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

Improve this answer

1 Comment

Thanks for the sol sir, could i achieve the same for multiple fields like ? for example i have 5 inputs , for combinations of 2 and 4 , 3 and 5 .....i need to enable or else still in disable
1

Another way to go about it:

Store the fields, and create a new collection of them each time a key is pressed, filtering each one by its value.

If the length of our empty fields is the same as the length of all fields, disable the button:

$(document).ready(function() {
    var $fields = $('.field input');
    
    $fields.keyup(function() {

        var $emptyFields = $fields.filter(function(){
            return !this.value;
        });
        
        $('.actions input').prop('disabled', $emptyFields.length === $fields.length);
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

Documentation:

Improve this answer

Comments

1

You could with Jquery.map and Array.find

  1. Jquery.map().get() is get all the input value length with condition.
  2. Array.find will find the any one of the input as valid length of string
  3. Then finally the result will be reversely compare prop('disabled', !filled)

$(document).ready(function() {
  $('.field input').keyup(function() {
    var res = $('.field input').map(function() {
        return $(this).val().length != 0
    }).get()
    var filled  = res.find(a=> a == true)
    $('.actions input').prop('disabled', !filled);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

Updated with select option

Required field based .Button only enabled after required field 1 and 3 both are filled

$(document).ready(function() {
  $('.field input,.field select').on('keyup change',function() {
    var res = $('.field input[required],.field select[required]').map(function() {
      return $(this).val().trim().length != 0
    }).get();
    var filled = res.every(a => a == true)
    $('.actions input').prop('disabled', !filled);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username *</label>
      <input id="username" required type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='field'>
      <label for="password">email *</label>
      <input id="password" required type="password" />
    </div>
    <div class='field'>
      <label for="password">select email *</label>
      <select required>
        <option value="">Select</option>
        <option value="1">one</option>
        <option value="2">two</option>
      </select>
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

Improve this answer

19 Comments

sir, how would i use the same for <select> tag too?, is this possible?
@Codenewbie .yes of-course .You could add select elem in the jquery selector $('.field input[required],.field select[required]') .Check my latest updated answer
I have been trying this jsfiddle.net/05em7jh2 .....I am trying to disable the submit button when these combinations are selected 1) wordtype and word 2) wordlength + word 3) wordlength + wordtype + word
could you please look at the fiddle
@Codenewbie check jquery link present or not
|
0

You can try this in a simple way, as shown below:

var filled = false;
$('.field input').each(function() {
            if ($(this).val().length > 0) {
                filled = true;
                return;     // just add return means break from loop whenever any field is filled. 
            }
        });

        if (filled) {
            $('.actions input').attr('disabled', false);
        } else {
            $('.actions input').attr('disabled', 'disabled');
        }
    });
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.