避免通过动态输入发送空值（HTML - Jquery）答案

【问题标题】：Avoid sending empty values, through dynamic inputs (HTML - Jquery)避免通过动态输入发送空值（HTML - Jquery）
【发布时间】：2017-01-21 15:42:47
【问题描述】：

我找到了这个教程，他们很好地解释了如何添加动态输入，但是，如果单击提交按钮，这不会过滤输入中的空值。这个想法是在将它们发送到服务器之前过滤这些空值，有什么想法吗？

http://www.codexworld.com/add-remove-input-fields-dynamically-using-jquery/

代码：

<?php
if(isset($_REQUEST['submit'])){
    $field_values_array = $_REQUEST['field_name'];

    print '<pre>';
    print_r($field_values_array);
    print '</pre>';

    foreach($field_values_array as $value){
        //your database query goes here
    }
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Add more fields using jQuery</title>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = $('.field_wrapper'); //Input field wrapper
    var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove field"><img src="remove-icon.png"/></a></div>'; //New input field html 
    var x = 1; //Initial field counter is 1
    $(addButton).click(function(){ //Once add button is clicked
        if(x < maxField){ //Check maximum number of input fields
            x++; //Increment field counter
            $(wrapper).append(fieldHTML); // Add field html
        }
    });
    $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});
</script>

</head>
<body>
<form name="codexworld_frm" action="" method="post">
<div class="field_wrapper">
    <div>
        <input type="text" name="field_name[]" value=""/>
        <a href="javascript:void(0);" class="add_button" title="Add field"><img src="add-icon.png"/></a>
    </div>
</div>
<input type="submit" name="submit" value="SUBMIT"/>
</form>
</body>
</html>

【问题讨论】：

您的意思是您将同时拥有静态和动态输入字段，并且在提交表单时，空输入字段将不会发送到服务器。对吗？
下面由 charlietfl 发布的答案怎么样？希望它对你有用。

标签： javascript php jquery html input

【解决方案1】：

一种方法是删除提交事件处理程序中的空输入

$('form[name=codexworld_frm']).submit(function(){
    $(this).find('input').filter(function(){
           return !this.value;
    }).remove();
})

【讨论】：

这太酷了兄弟！太容易和简单了。简而言之，它具有表现力。
这行得通！谢谢。但是我的解决方案是使用 JqueryValidate，如果输入为空，我会强制用户消除添加的更多输入。
我喜欢这个解决方案。 +1 来自我。 :)
没有提到有关验证插件的问题。不清楚没有minimal reproducible example会有什么影响
我知道，这只是我即兴创作的另一种解决方案。

【解决方案2】：

通过阅读您的 cmets，您正在尝试验证现有的 Dom 元素和您动态添加的元素，问题是添加的元素没有达到您的验证代码？

如果是这样，请尝试使用委托而不是您当前正在执行的方式附加验证器

http://api.jquery.com/delegate/

这允许添加到 Dom 的元素按照您的预期运行。

【讨论】：