Check if inputs and select is not empty and enable button

Question

I have table list with many inputs and selects in filter option. The goal to check if any of this fields has content (such as input is not empty, and select has options selected). I can't understand how to make it work with more then one of these element, because now if two inputs has values and one input to clear it sets button to disabled in spite that one of inputs has value. Help me to handle it.

function buttonStatus() {
  var buttonDisable = function(){
    $('input[type="submit"]').attr('disabled', true)
  },
      buttonEnable = function(){
        $('input[type="submit"]').attr('disabled', false);
      }

  $('input').on('keyup change', function(){
    var inputText = $.trim($('input').val())
    if(inputText.length > 0 || $('select option').is(':selected') && $('select option:selected').val() != 0) {
      buttonEnable()
    }
    else {
      buttonDisable()
    }
  })

  $('select').on('keyup change', function(){
    if ($('option').is(':selected') && $('option:selected').val() != 0 || $.trim($('input').val()).length > 0) {
      buttonEnable()
    }
    else {
      buttonDisable()
    }
  })
}

buttonStatus()

* {
  box-sizing: border-box;
}

div {
  margin: 50px;
}

input[type="submit"] {
  background: green;
  border: none; 
  padding: 5px;
  color: #fff;
}

input[type="submit"][disabled] {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" />
  <input type="text" />
  <select>
    <option value="0"></option> 
    <option value="1">Nigeria</option>
    <option value="2">Kenya</option>
    <option value="3">Tanzania</option>
    <option value="4">Uganda</option>
    <option value="5">Ethiopia</option>
    <option value="6">Mozambique</option>
  </select>
  <select>
    <option value="0"></option> 
    <option value="1">Nigeria</option>
    <option value="2">Kenya</option>
    <option value="3">Tanzania</option>
    <option value="4">Uganda</option>
    <option value="5">Ethiopia</option>
    <option value="6">Mozambique</option>
  </select>
  <input type="submit" disabled>
</div>

If I understand what you need to get, your solution is to use $(this) to know what element are you targeting. You can make this: var inputText = $.trim($(this).val()). The problem is in the $('select') because $(this) will be the select, not the input. It's easiest if you put a classname or an id (both different) in the input tags. — Marcos Pérez Gude
– Marcos Pérez Gude, Commented Feb 11, 2016 at 13:57
I'd have to double comment on what Marcos just said. Inside the function() you get the current target with $(this); this the current scope. You can also pass an event "e" thru the function; example function(e) {...}. When trying to write validations like this, it's much easier to name and id everything. That way you can pick out exactly what input/select you are trying to check. — jjwdesign
– jjwdesign, Commented Feb 11, 2016 at 14:02

Mosh Feu · Accepted Answer · 2016-02-11 14:14:31Z

You need to iterate all of the inputs and selects using each and check if thier value not equal to 0 or ''.

Like this:

function buttonStatus() {
  var buttonDisable = function() {
    $('input[type="submit"]').attr('disabled', true)
  },
      buttonEnable = function() {
        $('input[type="submit"]').attr('disabled', false);
      }

  var elements = $('input[type="text"], select').on('keyup change', function() {
    var valid = false;
    
    elements.each(function() {
      var elm = $(this),
          val = elm.val();
      
      if ((val != '0' && elm.is('select')) || (val != '' && elm.is('input'))) {
        valid = true;
        return false;
      }
    });

    if(valid) {
      buttonEnable()
    }
    else {
      buttonDisable();
    }
  })
}

buttonStatus()

* {
  box-sizing: border-box;
}

div {
  margin: 50px;
}

input[type="submit"] {
  background: green;
  border: none; 
  padding: 5px;
  color: #fff;
}

input[type="submit"][disabled] {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" />
  <input type="text" />
  <select>
    <option value="0"></option> 
    <option value="1">Nigeria</option>
    <option value="2">Kenya</option>
    <option value="3">Tanzania</option>
    <option value="4">Uganda</option>
    <option value="5">Ethiopia</option>
    <option value="6">Mozambique</option>
  </select>
  <select>
    <option value="0"></option> 
    <option value="1">Nigeria</option>
    <option value="2">Kenya</option>
    <option value="3">Tanzania</option>
    <option value="4">Uganda</option>
    <option value="5">Ethiopia</option>
    <option value="6">Mozambique</option>
  </select>
  <input type="submit" disabled>
</div>

A. Wolff · Accepted Answer · 2016-02-11 14:05:29Z

You could check that any input element has value, handling case of select where you can check for selectedIndex:

$('div :input').on('input', function() {
  var $container = $(this).closest('div');
  var disabled = !$container.find(':input:not(:submit)').filter(function() {
    return this.value && ($(this).is('select') ? this.selectedIndex : true);
  }).length;  
  $container.find(':submit').prop('disabled', disabled);
});

* {
  box-sizing: border-box;
}
div {
  margin: 50px;
  }
input[type="submit"] {
  background: green;
  border: none; 
  padding: 5px;
  color: #fff;
}
input[type="submit"][disabled] {
  background: red;
    
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" />
  <input type="text" />
  <select>
    <option value="0"></option> 
    <option value="1">Nigeria</option>
    <option value="2">Kenya</option>
    <option value="3">Tanzania</option>
    <option value="4">Uganda</option>
    <option value="5">Ethiopia</option>
    <option value="6">Mozambique</option>
  </select>
  <select>
    <option value="0"></option> 
    <option value="1">Nigeria</option>
    <option value="2">Kenya</option>
    <option value="3">Tanzania</option>
    <option value="4">Uganda</option>
    <option value="5">Ethiopia</option>
    <option value="6">Mozambique</option>
  </select>
  <input type="submit" disabled>
</div>

jjwdesign · Accepted Answer · 2016-02-11 14:15:55Z

Usually I try to handle the validation on form submit. If you add required attributes, you can make validation easier. You might try something more like this approach, on submit of form id='formId'. This was for a Boostrap v3 form.

// On form submit
$('#formId').submit(function(e) {

    // Check all required fields before submit
    $('#formId').find('input, select, textarea').each(function() {
        var self = $(this);
        if (self.attr('required')) {
            if (self.parent().hasClass('input-group')) {
                if (!self.val()) {
                    // Add some display error fadeIn or Class Change here!
                    self.parent().parent().addClass('has-error');
                    self.parent().parent().find('span').fadeIn();
                } else {
                    // Add some display error fadeOut or Class Change here!
                    self.parent().parent().removeClass('has-error');
                    self.parent().parent().find('span').fadeOut();
                }
            } else {
                if (!self.val()) {
                    self.parent().addClass('has-error');
                    self.parent().find('span').fadeIn();
                } else {
                    self.parent().removeClass('has-error');
                    self.parent().find('span').fadeOut();
                }
            }
        }
    });

    // If has-error classes found, do not submit
    if ($('.has-error').length > 0) {
        // Prevent form default submit
        e.preventDefault();
    } else {
        if (spinner === false) {
            // Check out the JS Spinner.
            spinner = new Spinner().spin();
            $('#submit_button_div').prepend(spinner.el);
        }
    }

});

Instead of on Form Submit, you could change it to watch all form fields using on change or focus out, but that might add a lot of javascript processing to your page.

Batu.Khan · Accepted Answer · 2016-02-11 14:17:16Z

0

function buttonStatus() {
  var not_emp_inp = $('input:text').filter(function() { return $(this).val() != ""; });
  var not_emp_sel = $('select').filter(function() { return $(this).val() != "0"; });
  $('input[type="submit"]').attr('disabled', (not_emp_inp.length && not_emp_sel.length) ? false : true);
}

$('input,select').on('keyup change', function(){   buttonStatus();  });

FIDDLE

edited Feb 11, 2016 at 14:17

answered Feb 11, 2016 at 14:08

Batu.Khan

3,0652 gold badges23 silver badges29 bronze badges

1 Comment

Batu.Khan Over a year ago

@NeedHate So is it like this? Needs one input to fill and one option to select

Collectives™ on Stack Overflow

Check if inputs and select is not empty and enable button

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related