- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用 .seralizeArray()
来获取表单输入值。
输入字段由具有相应价格的商品列表组成;我想根据相应的 key 对保存每个值,但不断收到错误:...长度为 0 的空数组
。
我尝试了几种选择器组合,但仍然得到[]
。
如何才能成功序列化?
下面是我的代码:
HTML
<fieldset id='itemInformation'>
<h2>Items</h2>
<div class="itemGroup">
<input type="text" id="item1Name" value="Item 1" class="itemNames">
<input type="number" step="0.01" id="item1Price" value="0.00">
</div>
<div class="itemGroup">
<input type="text" id="item2Name" value="Item 2" class="itemNames">
<input type="number" step="0.01" id="item2Price" value="0.00">
</div>
<div class="itemGroup">
<input type="text" id="item3Name" value="Item 3" class="itemNames">
<input type="number" step="0.01" id="item3Price" value="0.00">
</div>
<div class="changeNumber">
<button class="increase">+</button>
<button class="decrease">–</button>
</div>
<div class="buttons">
<button class="previousButton btn">Previous</button>
<button class="nextButton btn">Next</button>
</div>
</fieldset>
JS
$('#itemInformation .nextButton').bind('click', function (event) {
event.preventDefault()
console.log($('.itemGroup').serializeArray())
})
最佳答案
注意!
您需要添加name
属性到所有您的 <input>
字段如下:
<input type="text" id="item1Name" value="Item 1" class="itemNames" name="itemNames">
此外,请使用 <form>
而不是 <fieldset>
除非您确实有明确的理由用于此目的。
serializeArray();
的语法如下:$(selector).serializeArray();
.
引用:w3schools (阅读定义和用法)。
使用相同的概念 here目的是序列化相似项目的集合。
请注意:使用 <form>
元素不是强制性的,只是建议您根据您的预期目的和上面在帖子中共享的信息轻松有效地进行序列化;我可能误读了你的意思,但最重要的是错过了 name
属性,它占空数组 []
因为没有没有可以序列化。
请记住,根据您的项目要求,您可能必须使用 <fieldset>
在需要时。
您可以使用<fieldset>
具有不同 id 的 元素,用于对您想要标识为一个单元的相关项目进行分组。因此,您可能会遇到这样的情况:
<form id="itemDetails">
<fieldset id="itemInformation">
<!-- itemInformation label and input fields -->
</fieldset>
<fieldset id="itemOrigin">
<!-- itemOrigin label and input fields -->
</fieldset>
<fieldset id="itemDestination">
<!-- itemDestination label and input fields -->
</fieldset>
</form>
然后您可以使用 $('#itemDetails').serializeArray();
序列化整个表单或 $('#FIELDSET_ID').serializeArray();
,其中 FIELDSET_ID 是您想要根据事件从表单中序列化的选定字段集的相应 id,以实现您的预期目的。
添加了下面的代码片段,以说明如何有效地将项目与其相应的值配对;
$('#itemInformation .nextButton').bind('click', function (event) {
event.preventDefault();
console.table($('#itemInformation').serializeArray());
console.log($('#itemInformation').serializeArray());
});
<form id="itemDetails">
<!-- grouping all fieldset under a form element with an assigned id where
they can all be hierarchically referenced for precision where needed -->
<fieldset id="itemInformation">
<h2>Items</h2>
<div class="itemGroup">
<input type="number" id="item1Name" placeholder="0.00" class="itemNames" name="item1Name">
</div>
<div class="itemGroup">
<input type="number" id="item2Name" placeholder="0.00" class="itemNames" name="item2Name">
</div>
<div class="itemGroup">
<input type="number" id="item3Name" placeholder="0.00" class="itemNames" name="item3Name">
</div>
<div class="changeNumber">
<button class="increase">+</button>
<button class="decrease">–</button>
</div>
<div class="buttons">
<button class="previousButton btn">Previous</button>
<button class="nextButton btn">Next</button>
</div>
</fieldset>
<!-- other fieldset as necessary and harvest their input separately in
a similar fashion as done with the first one itemInformation -->
<fieldset id="itemOrigin">
<!-- itemOrigin label and input fields -->
</fieldset>
<fieldset id="itemDestination">
<!-- itemDestination label and input fields -->
</fieldset>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
下面是浏览器开发者控制台(此处:Google Chrome 浏览器)中上述内容的示例输出;
另外,可用here (JSfiddle)。
您会意识到每个 <div class="itemGroup">
有一个 <input>
元素,其中没有 value
属性,而是一个 placeholder
来说明预期的输入格式。您可以使用 value
相反,如果您想预先定义一个固定值,以便在没有输入值的情况下与相应的项目配对。 name
属性是必需的:不要省略它。
因此(如上所述),当您序列化时,从输入字段收集的值将与相应的输入值和/或默认值配对。
关于jquery - SerializeArray() 给出空数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39808965/
这个问题已经有答案了: Serialize form not working in jQuery (8 个回答) 已关闭10 年前。 我正在使用 Jquery 和 Backbone 来构建我的应用程序
我正在尝试使用 .seralizeArray() 来获取表单输入值。 输入字段由具有相应价格的商品列表组成;我想根据相应的 key 对保存每个值,但不断收到错误:...长度为 0 的空数组。 我尝试了
(问题已更新以反射(reflect)实际问题) 我刚刚意识到 serializeArray 没有从禁用的字段中获取内容。 通过从自动建议列表中选择一个项目来填充一组(街道)地址字段。完成此操作后,这些
我还没有找到关于这是否可能的具体答案,但看起来应该是...... 我想序列化 div 中包含的所有输入元素。我无法使用表单,因为它会嵌套在另一个表单中。然后我会获取这些值并通过 ajax 发布它们。
我在序列化表单时遇到了一些麻烦 $(form).serializeArray() 将返回[{name:"name1",value:"value1"},{name:"name2"
我有一个有两个按钮的表单。一个用于保存记录,另一个用于取消保存过程。我正在使用 rails.js (对于那些不了解的人来说是一个常见的 AJAX/jQuery 插件) javascript 文件,它与
我有多个在单页上,都有唯一的 ID,表单正文如下所示。 . . . . . . .
我需要 serializeArray() 每次都返回选择框中的所有项目,而不仅仅是当前选定的项目,因为我的选择框的内容可以增长或缩小。 Test1 Test2 Test3 T
我正在使用 jquery .serializeArray() 来获取所有 在 。我正在放置来自 .serializeArray() 的 Json 对象进入 jquery .data() 如何从 Js
我试图将数组作为字符串传递 $(document).ready(function(){ var args = {}; $('.radio').click(function(){ var ob
我有这个 html 结构: Mini description (affichage dernières destinations ajoutées et met
有一个由脚本创建的输入表,可能包含任意数量的输入行,因此有很多同名的输入元素。问题是 serializeArray() 不会拆分这些输入行,因此我无法在 PHP 端处理这些行。 Her
我有这个表格: Email Passw
我有一个使用 ajax 动态创建的表单(因为表单元素的数据必须来自数据库),我想序列化表单的元素以通过 ajax 提交。我目前只是使用 jQuery 网站上的代码测试我的理论,看看我是否可以选择表单元
我正在执行以下操作: var data = $(form).serializeArray(); // Now I want to add another value on this data dat
我有一个通过后端动态创建的调查问卷页面。我需要序列化表单数据,但 form.serialize 数组采用 name 属性,我想为我发送的数据分配自己的 key 。我对 JavaScript 很陌生。我
我正在尝试在 jQuery 中序列化我的表单提交。我正在尝试获取类似的 JSON字符串或对象。另外,如果有人能让我知道如何只选择那些有值的小部件而不是空的小部件,那就完美了。 我很匆忙,因此没有检查语
我有几组复选框,其中包含: 1 个家庭 很多种类 很多种类 多种性别 多种性别 我有以下 HTML:
我有这个问题,我使用serializearray() jquery将Form的所有字段序列化为Json。如果在输入中输入 name 属性,它可以正常工作,但如果我只想输入 ID 属性,它就不起作用。
我使用 serializeArray() 方法将 HTML 表单获取为 JS 对象。当表单具有带有“多个”选项的选择控件但未选择任何选项时,对象不会序列化。 这是一个示例:https://fiddle
我是一名优秀的程序员,十分优秀!