CODEWITHSUNDEEP
javascriptjquery
KcH
KcH

Reputation: 3502

Enable submit button if atleast one field has filled value / or a selected dropdown

I have a <select> tag along with <input>, as below, but it doesn't work.

How can I enable the submit button if at least one field has a value or a selected option? How can I enable the submit button on multiple (and/& in general) fields selection?

Any help is appreciated!

$(document).ready(function() {
  $('.field input,.field select').keyup(function() {
    var hasValue = $('#username,#password,#position').filter((index, input, select) => 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='field'>
      <select id="position">
        <option value="">position</option>
        <option value="1">first</option>
        <option value="2">second</option>
        <option value="3">third</option>
      </select>
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

Upvotes: 1

Views: 233

Answers (3)

Basil Abubaker
Basil Abubaker

Reputation: 1651

You can use the change event instead of the keyup

$(document).ready(function() {
  $( '.field input,.field select' ).change(function() {
   var hasValue = $('#username,#password,#position').filter((index, input, select) => 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='field'>
      <select id="position">
        <option value="">position</option>
        <option value="1">first</option>
        <option value="2">second</option>
        <option value="3">third</option>
      </select>
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

Upvotes: 2

Richard Housham
Richard Housham

Reputation: 1680

You just need to use change rather than keyup

$(document).ready(function() {
  $('.field input,.field select').change(function() {
    var hasValue = $('#username,#password,#position').filter((index, input ,select) => input.value.length > 0).length;

    $('.actions input').attr('disabled', hasValue ? false : 'disabled');
  });
});

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074305

I would use input and change on the form, rather than keyup on the fields, since of course you can pick things with the mouse. I'd also use prop, not attr, to set disabled:

$(document).ready(function() {
  $('form').on("input change", function() {
    var hasValue = $('#username,#password,#position').filter((index, input, select) => input.value.length > 0).length;

    $('.actions input').prop('disabled', !hasValue);
  });
});
<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='field'>
      <select id="position">
        <option value="">position</option>
        <option value="1">first</option>
        <option value="2">second</option>
        <option value="3">third</option>
      </select>
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

Separately, I think I'd probably use a more general selector when selecting the fields to check, and stop the check as soon as I know I need to enable the form:

$(document).ready(function() {
  $('form').on("input change", function() {
    var hasValue = false;
    $(this).find("input[type=text], input[type=password], select").each(function() {
      if (this.value) {
        hasValue = true;
        return false;
      }
    });
    $(this).find('.actions input').prop('disabled', !hasValue);
  });
});
<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='field'>
      <select id="position">
        <option value="">position</option>
        <option value="1">first</option>
        <option value="2">second</option>
        <option value="3">third</option>
      </select>
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

Upvotes: 3

Related Questions