跳过 Jquery 序列化中的隐藏输入答案

【问题标题】：Skip hidden inputs in Jquery serialize跳过 Jquery 序列化中的隐藏输入
【发布时间】：2015-04-10 16:47:12
【问题描述】：

我的表单输入为隐藏和可见，如下所示。在此示例中，我只想序列化未隐藏的 name='country'

<form id="finalform">
<input type='hidden' name='sid' value='901271316' />
<input type='hidden' name='tco_currency' value='USD'>
<input   name='country' value='India' />
</form>

我尝试了下面的代码，但它甚至可以序列化隐藏的输入。

var frm = $("form#finalform:visible");
 var add= JSON.stringify(frm.serializeArray());

【问题讨论】：

标签： jquery

【解决方案1】：

使用下面的代码。 not(:hidden) 不会包含隐藏在 serialize() 中的输入类型

查看DEMO

var frm  = $('#finalform').find(":input:not(:hidden)").serialize();

或者

var frm  = $('#finalform :input:not(:hidden)').serialize();

演示

var frm  = $('#finalform :input:not(:hidden)').serializeArray();

var frm1  = $('#finalform').find(":input:not(:hidden)").serializeArray();

$('#firstOutput').text(JSON.stringify(frm))
$('#secondOutput').text(JSON.stringify(frm1))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="finalform">
 <input type='hidden' name='sid' value='901271316' />
 <input type='hidden' name='tco_currency' value='USD'>
 <input   name='country' value='India' />
</form>


<div id="firstOutput"> </div>
<div id="secondOutput"> </div>

【讨论】：

【解决方案2】：

我发现这是一种更清洁的方式：

var frm = $('#finalform [type!="hidden"]').serialize()

【讨论】：

【解决方案3】：

您可以在序列化之前制作一个临时副本并从中删除隐藏的输入：

var form = $("#finalform").clone();
$(form).find("input[type=hidden]").remove()
var serialized = $(form).serializeArray();

【讨论】：

$(form).find ?它仍在页面中搜索其他表单并序列化隐藏的输入
不，$(form).find() 在表单的 dom 中挖掘与 input[type=hidden] 匹配的所有内容。试试看，它会很好用！它是 $(form) 而不是 $('form') 并且不是一回事，第一个不是选择器。

【解决方案4】：

这是另一种可能的演示解决方案。

var notHidden = $('#finalform > :not(input[type=hidden])').serializeArray();

$('#itemsSerializedCount').text($(notHidden).length)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js"></script>
<form id="finalform">
<input type='hidden' name='sid' value='901271316' />
<input type='hidden' name='tco_currency' value='USD'>
<input   name='country' value='India' />
</form>

<lablel id="itemsSerializedCount"></label>

这里将没有隐藏的输入控件序列化。

【讨论】：