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

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

javascript php jquery html input

Javascript 避免通过动态输入（HTML-Jquery）发送空值,javascript,php,jquery,html,input,Javascript,Php,Jquery,Html,Input,我找到了本教程，其中他们很好地解释了如何添加动态输入，但是，如果单击submit按钮，则不会过滤输入中的空值。我们的想法是在将这些空值发送到服务器之前过滤它们，有什么想法吗守则： <?php if(isset($_REQUEST['submit'])){ $field_values_array = $_REQUEST['field_name']; print '<pre>'; print_r($field_values_array); pr

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

守则：

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


使用jQuery添加更多字段
$（文档）.ready（函数（）{
var maxField=10；//输入字段增量限制
var addButton=$（'.add_button'）；//添加按钮选择器
var wrapper=$（'.field_wrapper'）；//输入字段wrapper
var fieldHTML=''；//新输入字段html
var x=1；//初始字段计数器为1
$（添加按钮）。单击添加按钮后，单击（函数（）{//）
如果（x

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

通过阅读注释，您试图验证现有的Dom元素和动态添加的元素，问题是添加的元素没有命中您的验证代码

如果是这样，请尝试使用委托连接验证器，而不是以当前的方式连接验证器

这允许添加到Dom中的元素按预期的方式运行

您的意思是，您将同时拥有静态和动态输入字段，并且在提交表单时，空输入字段将不会发送到服务器。对吗？下面由charlietfl发布的答案如何？希望它对你有用。太酷了，兄弟！太简单了。简单地说，它很有表现力。这很有效！谢谢然而，我的解决方案是使用JqueryValidate，如果输入为空，我会强制用户删除添加的更多输入。我喜欢这个解决方案+1从我这里。：）没有提到任何关于验证插件的问题。不清楚没有一个我知道的解决方案会产生什么影响，这只是我临时想出的另一个解决方案。

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