How to properly check if all form elements are filled with JavaScript

Question

I have a form:

<form action="process.php" method="POST" enctype="multipart/form-data" id="add_prod_form">
Item Name: <input type="text" name="add_prod_name" id="add_prod_name"/><br /><br />
Image 1: <input type="file" name="add_prod_image[]" id="add_prod_image"/><br /><br />
Image 2: <input type="file" name="add_prod_image[]" /><br /><br />
Image 3: <input type="file" name="add_prod_image[]" /><br /><br />
Image 4: <input type="file" name="add_prod_image[]" /><br /><br />
Image 5: <input type="file" name="add_prod_image[]" /><br /><br />
Short description:<br />
<textarea rows="7" cols="50" name="add_prod_description_short" id="add_prod_description_short"/></textarea><br />
Long description:<br />
<textarea rows="7" cols="50" name="add_prod_description_long" id="add_prod_description_long"/></textarea><br /><br />
Price: <input type="text" name="add_prod_price" id="add_prod_price"/><br /><br />
<input type="hidden" name="action" value="add_product" />
<input type="submit" name="submit" id="add_prod_submit" disabled="disabled">

And I have a small script:

<script>
$('#add_prod_name, #add_prod_image, #add_prod_description_short, #add_prod_description_long, #add_prod_price').keyup(function() {
    if(allFilled()){
         $('#add_prod_submit').removeAttr('disabled');
    }
});

function allFilled() {
    var filled = true;
    $('#add_prod_form input, #add_prod_form textarea').each(function() {
        if($(this).val() == '') filled = false;
    });
    return filled;
}

</script>

What I am expecting is that once all the fields are filled, the submit button becomes available.It does not. Unfortunately I can't just check all the "body input" elements as there is another form on the same page. I have a feeling my problem lies somewhere in the $('#add_prod_form input, #add_prod_form textarea').each(function() section but I have tried about 100 ways and nothing works.

I am currently adapting code I found here

Answer 1

You have some fields in your form that may be empty, such as the remaining four file input elements.

Since you already have a fixed list of fields onto which you attach an event handler, you could reuse that when you perform the checks as well:

jQuery(function($) {
  var $fields = $('#add_prod_name, #add_prod_image, #add_prod_description_short, #add_prod_description_long, #add_prod_price');
  
  $fields.on('keyup change', function() {
    if (allFilled($fields)) {
       $('#add_prod_submit').removeAttr('disabled');
    }
  });

  function allFilled($fields) 
  {
    return $fields.filter(function() {
      return this.value === ''; 
    }).length == 0;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="process.php" method="POST" enctype="multipart/form-data" id="add_prod_form">
Item Name: <input type="text" name="add_prod_name" id="add_prod_name"/><br /><br />
Image 1: <input type="file" name="add_prod_image[]" id="add_prod_image"/><br /><br />
Image 2: <input type="file" name="add_prod_image[]" /><br /><br />
Image 3: <input type="file" name="add_prod_image[]" /><br /><br />
Image 4: <input type="file" name="add_prod_image[]" /><br /><br />
Image 5: <input type="file" name="add_prod_image[]" /><br /><br />
Short description:<br />
<textarea rows="7" cols="50" name="add_prod_description_short" id="add_prod_description_short"/></textarea><br />
Long description:<br />
<textarea rows="7" cols="50" name="add_prod_description_long" id="add_prod_description_long"/></textarea><br /><br />
Price: <input type="text" name="add_prod_price" id="add_prod_price"/><br /><br />
<input type="hidden" name="action" value="add_product" />
<input type="submit" name="submit" id="add_prod_submit" disabled="disabled">

Further improvement could be made by adding a class to each required field, so that can reduce the size of your selector and make it easier to later add fields without having to edit your code.

Answer 2

When you are searching for the for inputs it will also include the submit button which has no value or null. It should be -

$('#add_prod_form input, textarea').not('#add_prod_submit').each(function(){ ...

Working Demo