Question

我想使用How do I use jQuery's form.serialize but exclude empty fields，但它不起作用。我使用了一个重定向到php脚本的最小示例：

<html><head>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#myForm').submit(function(){
        $("#myForm :input[value!='']").serialize();
        alert('JavaScript done');
    });
});
</script>
</head>


<body>
    <form id="myForm" action="php.php" method="get">
       <input id=id1 name=name1 type="text" /><br>
       <input id=id2 name=name2 type="text" /><br>
       <input id=id3 name=name3 type="text" /><br>
       <input id=id4 name=name4 type="text" />
       <input type="submit" value="submit form"/>
    </form>
</body></html>

这是php脚本

<?php
print_r($_GET);
?>

如果我只将“111”写入第一个文本框，我会从php获取：

Array ( [name1] => 111 [name2] => [name3] => [name4] => )

因此，所有字段都将其作为get参数。

你能帮帮我吗？

TIA

Answer 1

您无法为value使用属性选择器，因为它是一个不断变化的属性。

使用.filter()

$(document).ready(function () {
    $('#myForm').submit(function () {
        $(this).find(":input").filter(function () {
            return $.trim(this.value).length > 0
        }).serialize();
        alert('JavaScript done');
    });
});

演示：Fiddle

注意：只是在表单提交中序列化输入字段不会改变，只有在通过ajax提交表单时才能使用它。

如果您想进行普通表单提交但想要删除空字段，请使用.remove()

$(document).ready(function () {
    $('#myForm').submit(function () {
        $(this).find(":input").filter(function () {
            return $.trim(this.value).length == 0
        }).remove();
        alert('JavaScript done');
    });
});

Answer 2

你需要AJAX表单 - 只是调用serialize不会删除请求中的字段

Live Demo

$('#myForm').on("submit",function (e) {
    e.preventDefault(); // cancel the form itself
    var opts = $(this).find(":input").filter(function () {
        return $.trim(this.value).length > 0;
    }).serialize();
    $.get($('#myForm').attr("action"),opts,function(data) {
       alert(data);
    });
});

Answer 3

您可以使用ajax进行尝试，并在php文件中获取数组数据，请参阅下面的代码。

<html><head>
<script src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#submit_form').click(function(e){
    $("#myForm :input[value!='']").serialize();
    var form_data= $("#myForm :input[value!='']").serializeArray();
    $.post("php.php",form_data,function(data){
         alert('JavaScript done');
    },"json");      
   e.preventDefault();

   });


});
</script>
</head>


<body>
<form id="myForm">
   <input id=id1 name=name1 type="text" /><br>
   <input id=id2 name=name2 type="text" /><br>
   <input id=id3 name=name3 type="text" /><br>
   <input id=id4 name=name4 type="text" />
   <input type="submit" id="submit_form" value="submit form"/>
</form>

“我如何使用jQuery的form.serialize但排除空字段”不起作用（使用php）

3 个答案: