CODEWITHSUNDEEP
jqueryselectinput
NeedH8
NeedH8

Reputation: 482

Check if inputs and select is not empty and enable button

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>

Upvotes: 0

Views: 4123

Answers (4)

Batu.Khan
Batu.Khan

Reputation: 3065

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

Upvotes: 0

jjwdesign
jjwdesign

Reputation: 3322

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.

Upvotes: 0

Mosh Feu
Mosh Feu

Reputation: 29277

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>

Upvotes: 2

A. Wolff
A. Wolff

Reputation: 74420

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>

Upvotes: 2

Related Questions