"如何使用jQuery's form.serialize但排除空字段"不起作用(使用php）

"How do I use jQuery's form.serialize but exclude empty fields" does not work (with php)

本文关键字：quot 字段 不起作用 使用 php 排除 serialize 何使用 jQuery form      更新时间：2023-09-26

我想使用如何使用jQuery'；s表单。序列化但排除空字段，但它不起作用。我使用了一个重定向到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

不能为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');
    });
});

您可以使用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>

您需要AJAX表单-仅调用serialize不会从请求中删除字段

实时演示

$('#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);
    });
});
相关文章：