Question

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

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>

Answer 1

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

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

Answer 2

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

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

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

这允许添加到Dom的元素表现出您的预期。

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

2 个答案: