如何正确检查所有表单元素是否填充JavaScript

前端之家收集整理的这篇文章主要介绍了如何正确检查所有表单元素是否填充JavaScript前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个表格:
<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">

我有一个小脚本:

<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>

我期望的是,一旦所有的字段都填满了,提交按钮就可以使用了.它不会.不幸的是,我不能只是检查所有的“身体输入”元素,因为在同一页面上有另一种形式.我有一种感觉,我的问题在于$(‘#add_prod_form输入,#add_prod_form textarea)中的某个地方.每个(function()部分,但我尝试了大约100种方式,没有任何作用.

我目前正在调整我发现的代码here

解决方法

您的表单中有一些可能为空的字段,例如剩余的四个文件输入元素.

由于您已经有一个固定的字段列表来附加事件处理程序,所以您也可以在执行检查时重用该列:

jQuery(function($) {
  var $fields = $('#add_prod_name,#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">

可以通过在每个必填字段中添加一个类来进一步改进,这样可以减少选择器的大小,使之更容易添加字段,而无需编辑代码.

原文链接:https://www.f2er.com/html/229309.html

猜你在找的HTML相关文章