BobbyJones BobbyJones - 4 months ago 8
jQuery Question

Using jQuery to build on existing functionality to code to also check if any input boxes have values

I really need your help here. Just a heads up that I am newcomer to the jQuery library.

That out of the way, I would like to get some help to so as to build onto my existing code (the codes existing purpose in my post is to check and see if any of the select boxes have any selected option values, attached to an on change event, so if any of the select boxes have any selected option values then enable the search button, if not, then just keep it nicely disabled.

Now, here's where it gets really tricky for me, how can the existing code be modified so as to also check (in parellel to the code below) to check and see if any input boxes also have any input values,

So the expected outcome for a typical scenario is this, if the user has made a selection in any of the select boxes or has typed in any text in the form, then enable the search button, if the form contains no selected options and all of the input boxes are empty, then disable the #search button.

Here's both the HTML Markup and Code in question:

<!DOCTYPE html>

<html>

<head>
<script type="text/javascript" src="jq/jquery.js"></script>
<script type="text/javascript">


window.onload = function() {

$('#myform').on('change', function() {

var form = $(this);

form.find('#search').prop('disabled', form.find('select option:selected').filter(function() {

return this.value.length;

}).length === 0)

}).change();

}
</script>

</head>

<body>
<form id="myform">
Cars
<select id="car">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br><br>
Fruits
<select id="fruits">
<option value=""></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
<option value="mango">mango</option>
<option value="orange">orange</option>
</select>
<br><br>
Vegetable
<input type="input" id="veggie">
<br><br>
Number
<input type="input" id="number">
<br><br>
<input type="button" value="search" id="search" disabled>
</form>
</body>

</html>

Answer

Have generalized function to test all the input:

window.onload = function() {
  var validateForm = function() {
    return $(':input').filter(function() {
      return this.value === '';
    }).length;
  }

  $('#myform').on('change keyup', ':input', function() {
    $('#search').prop('disabled', validateForm());
  }).change();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="myform">
  Cars
  <select id="car">
    <option value=""></option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
  <br>
  <br>Fruits
  <select id="fruits">
    <option value=""></option>
    <option value="apple">apple</option>
    <option value="banana">banana</option>
    <option value="pear">pear</option>
    <option value="strawberry">strawberry</option>
    <option value="mango">mango</option>
    <option value="orange">orange</option>
  </select>
  <br>
  <br>Vegetable
  <input type="input" id="veggie">
  <br>
  <br>Number
  <input type="input" id="number">
  <br>
  <br>
  <input type="button" value="search" id="search" disabled>
</form>

Comments