Check if all inputs are filled in to remove disabled attribute

Question

I want to check if all inputs have an value if so than remove the disabled attribute on the button.

Here below I have a code snippet inserted, but this removes the attribute when only one input has a value.

 $(".follow-url-inputs").each(function(index, item) {
      $(item).change(function() {
        var empty = $(this).filter(function() {
          return this.value === "";
        });
        if (empty.length) {
          console.log("all fiels filled in");
        } else {
          $('.fs_btn-save').removeAttr('disabled')
        }
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="follow-inputs text-center px-5">
          <div class="input-group px-5">
            <div class="input-group-prepend">
              <span class="input-group-text" id="basic-addon1">
                <i class="fab fa-facebook"></i>
              </span>
            </div>
            <input id="facebook" class="form-control follow-url-inputs" name="facebook" placeholder="https://facebook.com/followURL" data-com.agilebits.onepassword.user-edited="yes">
          </div><br>
          <div class="input-group px-5">
            <div class="input-group-prepend">
              <span class="input-group-text" id="basic-addon1">
                <i class="fab fa-linkedin"></i>
              </span>
            </div>
            <input id="linkedin" class="form-control follow-url-inputs" name="linkedin" placeholder="https://linkedin.com/followURL" data-com.agilebits.onepassword.user-edited="yes">
          </div><br>
          <div class="input-group px-5">
            <div class="input-group-prepend">
              <span class="input-group-text" id="basic-addon1">
                <i class="fab fa-twitter"></i>
              </span>
            </div>
            <input id="twitter" class="form-control follow-url-inputs" name="twitter" placeholder="https://twitter.com/followURL" data-com.agilebits.onepassword.user-edited="yes">
          </div><br></div>
          
          <div class="text-center">
                                <button class="btn btn-primary fs_btn-primary fs_btn-save" disabled onclick="setupFollowButtons()">Save</button>
                            </div>

Could someone help me on checking if all inputs has a value and than remove the disabled attribute.

[HTML required Attribute](https://www.w3schools.com/tags/att_input_required.asp) — Hearner, Aug 07 '18 at 14:27
Possible duplicate of [Disable/enable an input with jQuery?](https://stackoverflow.com/questions/1414365/disable-enable-an-input-with-jquery) — Pete, Aug 07 '18 at 14:28
`var empty = $(this).filter` You're only checking the current item, not the entire list of `.follow-url-inputs`. And your console.log message is reversed. If empty has a length, not all inputs have a value. — Shilly, Aug 07 '18 at 14:29

charlietfl · Accepted Answer · 2018-08-07T14:37:57.713

2

Logic is a bit backwards. You want to filter all the inputs inside change of each. Your current code only filters the one that changed

var $inputs = $(".follow-url-inputs").change(function() {

  var inValid = $inputs.filter(function() {
    return !this.value.trim();
  }).length;

  $('.fs_btn-save').prop('disabled', inValid)

  if (!inValid) {
    console.log("all fiels filled in");
  }     
});

edited Aug 07 '18 at 14:37

answered Aug 07 '18 at 14:31

charlietfl

170,828
13
121
150

score 0 · Answer 2 · answered Aug 07 '18 at 14:36

Use jquery map method. This will give an object and if any field is empty it will have a key which will have true as a value.

On doing Object.values it will return an array of all values and check if it has true which mean any one of the field is empty , in that case the button state can be disbaled

Also have changed change to keyup

$(".follow-url-inputs").keyup(function() {
  let m = $(".follow-url-inputs").map(function(item) {
    return $(this).val() === ""
  })
  // map will give an object
  // if any input is empty it will contain true
  if (Object.values(m).indexOf(true) !== -1) {
    console.log("all fiels filled in");
  } else {
    $('.fs_btn-save').removeAttr('disabled')
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="follow-inputs text-center px-5">
  <div class="input-group px-5">
    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon1">
                <i class="fab fa-facebook"></i>
              </span>
    </div>
    <input id="facebook" class="form-control follow-url-inputs" name="facebook" placeholder="https://facebook.com/followURL" data-com.agilebits.onepassword.user-edited="yes">
  </div><br>
  <div class="input-group px-5">
    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon1">
                <i class="fab fa-linkedin"></i>
              </span>
    </div>
    <input id="linkedin" class="form-control follow-url-inputs" name="linkedin" placeholder="https://linkedin.com/followURL" data-com.agilebits.onepassword.user-edited="yes">
  </div><br>
  <div class="input-group px-5">
    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon1">
                <i class="fab fa-twitter"></i>
              </span>
    </div>
    <input id="twitter" class="form-control follow-url-inputs" name="twitter" placeholder="https://twitter.com/followURL" data-com.agilebits.onepassword.user-edited="yes">
  </div><br></div>

<div class="text-center">
  <button class="btn btn-primary fs_btn-primary fs_btn-save" disabled onclick="setupFollowButtons()">Save</button>
</div>

score 0 · Answer 3 · answered Aug 07 '18 at 14:36

Try this instead

$(".follow-url-inputs").each(function(index, item) {
      $(item).change(function() {
        var isEmpty = true;
        $('input').each(function() {
            if ($.trim($(this).val()) == '') {
                isEmpty = true;
            }
            else {
                isEmpty = false;
            }
        });
        if (isEmpty) {
          console.log("isAllEmpty: "+ isEmpty);
        } else {
          $('.fs_btn-save').removeAttr('disabled')
          console.log("isAllEmpty: "+ isEmpty);
        }
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="follow-inputs text-center px-5">
          <div class="input-group px-5">
            <div class="input-group-prepend">
              <span class="input-group-text" id="basic-addon1">
                <i class="fab fa-facebook"></i>
              </span>
            </div>
            <input id="facebook" class="form-control follow-url-inputs" name="facebook" placeholder="https://facebook.com/followURL" data-com.agilebits.onepassword.user-edited="yes">
          </div><br>
          <div class="input-group px-5">
            <div class="input-group-prepend">
              <span class="input-group-text" id="basic-addon1">
                <i class="fab fa-linkedin"></i>
              </span>
            </div>
            <input id="linkedin" class="form-control follow-url-inputs" name="linkedin" placeholder="https://linkedin.com/followURL" data-com.agilebits.onepassword.user-edited="yes">
          </div><br>
          <div class="input-group px-5">
            <div class="input-group-prepend">
              <span class="input-group-text" id="basic-addon1">
                <i class="fab fa-twitter"></i>
              </span>
            </div>
            <input id="twitter" class="form-control follow-url-inputs" name="twitter" placeholder="https://twitter.com/followURL" data-com.agilebits.onepassword.user-edited="yes">
          </div><br></div>
          
          <div class="text-center">
                                <button class="btn btn-primary fs_btn-primary fs_btn-save" disabled onclick="setupFollowButtons()">Save</button>
                            </div>

Check if all inputs are filled in to remove disabled attribute

3 Answers3