简体   繁体   English

“我如何使用jQuery的form.serialize但排除空字段”(不适用于php)

[英]“How do I use jQuery's form.serialize but exclude empty fields” does not work (with php)

I'd like to use How do I use jQuery's form.serialize but exclude empty fields but it does not work. 我想使用如何使用jQuery的form.serialize,但排除空字段,但它不起作用。 I used a minimal example that redirects to a php script: 我使用了一个最小的示例来重定向到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>

An here is the php script 这是PHP脚本

<?php
print_r($_GET);
?>

If I write "111" only into the first textbox, I get from php: 如果我只在第一个文本框中输入“ 111”,我将从php中获得:

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

Thus, all fields made it into the get parameters. 因此,所有字段都将其放入get参数。

Can you please help me? 你能帮我么?

TIA TIA

You cannot use attribute selector for value as it is a changing property. 您不能将属性选择器用作value因为它是一个不断变化的属性。

Use .filter() 使用.filter()

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

Demo: Fiddle 演示: 小提琴

Note: just serializing the input fields does not change in form submission, it can be used only if the form is submitted via ajax. 注意:仅对输入字段进行序列化不会在表单提交中进行更改,仅当通过ajax提交表单时才可以使用它。

If you want to do a normal form submission but want to remove the empty fields then use .remove() 如果您要进行常规表单提交但要删除空白字段,请使用.remove()

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

You need to AJAX the form - just calling serialize does not remove the fields from the request 您需要AJAX表单-仅调用序列化操作不会从请求中删除字段

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);
    });
});

You can try it with ajax, and get the array data in php file, see below code. 您可以尝试使用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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM