i have 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 have 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 expecting once fields filled, submit button becomes available.it not. unfortunately can't check "body input" elements there form on same page. have feeling problem lies somewhere in $('#add_prod_form input, #add_prod_form textarea').each(function() section have tried 100 ways , nothing works.
i adapting code found here
you have fields in form may empty, such remaining 4 file input elements.
since have fixed list of fields onto attach event handler, reuse when perform checks 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 made adding class each required field, can reduce size of selector , make easier later add fields without having edit code.
Comments
Post a Comment