使用jQuery中serializeArray()方法时获取不到input里面的值

最新推荐文章于 2022-01-01 08:39:14 发布
原创 最新推荐文章于 2022-01-01 08:39:14 发布 · 1.5k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery

本文探讨了使用jQuery的serializeArray()方法从id为gameForm的表单中收集数据的技巧，强调了为input元素设置name属性的重要性。 
 var arrs = $("#gameForm").serializeArray();

此时需要给id为gameForm表单里的input属性加上name值…

JellyDDD
关注
BUG已解决 | 使用JQuery的serialize序列化表单时，无法获取到表单内未选中单/多选框的内容 | 手动编写一个加强版的serialize方法获取
希望每天都能进步一点点
02-23 1143
解决方式是参考网上其他的文章的，由于有很多雷同的内容，分不清原作者，这里就不贴来源了 运行版本： JQuery 3.6.0 查看源码： jquery.js jQuery.fn.extend( { serialize: function() { return jQuery.param( this.serializeArray() ); }, serializeArray: function() { return this.map( function() { // Can add pr.
JQuery中serialize()、serializeArray()和param()方法示例介绍
10-25
在给定的文件内容中，通过JQuery实现了一个简单的表单提交操作，使用了**serialize()**方法将表单内的数据序列化为URL编码的字符串，并通过AJAX的**$.get()**方法发送到服务器。服务器端接收到数据后，解析这些参数...
误用箭头函数导致 jQuery中serializeArray()取不到值
Voiceu的博客
01-26 664
如下所示，表单加了name属性，其他都没加，表单没有印象，查了网上的说要加readonly属性，加了根本就无法输入，不适用当前，多番试验，发现不用箭头函数就行了，***难道是jq不支持es6？？？***，但是如果注释掉serializeArray（）函数，下面的return false又确实能阻止表单的提交。 //为表单添加提交事件 $('#loginForm').on('submit',()=>{ //获取表单中用户输入的信息 //返回的是一个数组[{
jquery获取表单数据方法$.serializeArray()获取不到disabled的值
weixin_34072637的博客
05-21 1215
$.serializeArray()获取不到disabled的值 经实验，$.serializeArray()获取不到disabled的值，如果想要让input元素变为不可用，可以把input设为readonly,而不是disabled; 还有一种情况获取不到值，当页面中有两个一样name值的标签的时候，即使其中一个name值的input的样式为 display:none; 依然获取不到。...
$.serializeArray读取不到form中的值
qq_38861740的博客
07-16 1183
serializeArray() 方法通过序列化表单值来创建对象（name 和 value）的数组。您可以选择一个或多个表单元素（如输入和/或文本区），或表单元素本身。 input中存在一下内容，读取不到 1.display:none 2.disabled 3.有两个一样name值的标签 ...
jq获取不到input标签的value值
smile_foreach的博客
12-04 4698
<button class="btn btn-lg btn-primary btn-block" onclick="return checkPassword()" type="submit">注册</button> //把这两个变量放进方法里面 var password = $('#...
jquery-confrim使用，serializeArray()获取不到数据
hqweay 的博客
04-06 2052
最基本的增。我想实现这样一个效果，当点击网页上的添加按钮后，在网页上弹出一个添加信息的 form，然后填写该 form，点击确认后把表单信息发送至服务器。jquery-confrim 是一款对话框插件，可以实现在网页上弹出一个对话框，我再用 form 来填充这个对话框就可以完成上面的效果啦。思路：在 html 页面上写一个 form，并且设置为 隐藏，然后用 jquery-confrim 在弹出提示
jQuery工具方法serialize()和serializeArray()
04-07
5. 为了处理更复杂的场景，可以结合使用这两个方法，比如先用`serializeArray()`获取数组，然后根据需求进行过滤、添加或修改元素，最后再通过`$.param()`将其转换为URL编码字符串。 了解并熟练运用`serialize()`和...
jQuery ajax serialize()方法的使用以及常见问题解决
12-11
在JavaScript和jQuery的世界里，`...在使用`serialize()`方法时，理解它的工作方式和潜在限制非常重要，这样才能有效地处理表单数据并构建出准确无误的Ajax请求。记得在实际应用中，根据具体需求进行适当的调整和处理。
jquery form表单获取内容以及绑定数据
10-22
而对于`textarea`，则是直接将值设置到控件中，而对于普通的`input`则使用`.val()`方法将值设置到控件中。 ### 实际应用与示例 本文提供了具体的代码示例，以展示如何使用这些自定义的jQuery方法来获取表单数据和...
$.serializeArray()获取不到input的value值
weixin_44110923的博客
05-20 1794
今天修改成form提交 发现有几个input里面的value值获取不到，搜了一下原因是：$.serializeArray()获取不到disabled的值 如果想要让input元素变为不可用，可以把input设为readonly,而不是disabled; <input name="settlementName" id="realname" class="zcinput" type="te...
使用jquery的.val()无法获取input框的输入值
it_bird1999的博客
08-12 3354
使用jquery的.val()无法获取input框的输入值 错误案例 然后我去掉.val()，看是否获取了input对象 发现是能获取的，但是居然有两个input框。 错误原因 出现两个input是因为有两个id，但另一个id肯定不是我们前端写的，而是因为后端渲染 用的是克隆 代码里面没有，所以找是找不到另一个id的 修改方法 先获取你真是要获取的输入框的祖先元素； 然后通过这个祖先元素再获取这个元素； 就可以锁定这一个了 具体操作如下： 结尾 自然是成功了 ...
python测试开发django-186.使用 jquery 的 .val() 无法获取input框的输入值(已解决)
qq_27371025的博客
01-01 1618
前言 在使用 jquery 可以定位到元素， input框也输入了值，但是用.val()无法获取到输入框的值。 问题描述 如下图是一个input输入框 <div class="form-group"> <input type="text" id="project_name" name="project_name" class="form-control" placeholder="项目名称"> </div> 通过id属性可以定位到元素，并且只有一个 $('#p
使用$(form).serializeArray()提交表单，获取不到表单值的问题
热门推荐
haojuntu的专栏
04-06 1万+
最近在做Form表单提交时，使用html标签文本框，表单一直获取不到值，服务器控件就能获取到，最后找到的原因是input的标签没有添加name属性，  具体原因需要查询下ID和Name属性的区别，代码如下：    $.ajax({                 type: "POST",                 url: "Ajax.aspx",
jq 用val()获取input的值无效
w_____w_____的博客
07-29 2071
用id获取input标签，取不到该input的value值，用改标签的name属性就可以。 4个下面这种input，懒得复制了，就贴一个。 <input id="popup_email_add" name="email" placeholder="输入邮箱"> 这个是使用id获取然后val(),只能取第一个的value，剩下3个都是undefined。 function user_add(){ let Arr=[], userName=$('#popup_user_ad
表单序列化后得不到值
人生几度秋凉
07-09 1371
1、serialize()方法 描述：序列化表单内容为字符串,用于Ajax请求。 格式：var data = $(form).serialize(); 2.serializeArray()方法 描述：序列化表单元素(类似'.serialize()'方法)返回JSON数据结构数据。 注意,此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。 格式：...
jquery中form表单获取文本输入框value值失败的问题
sober
07-25 865
jquery中form表单获取文本输入框值失败的问题 问题描述： 只能获取input标签中固定写的value的值，使用jquery获取是空串。 问题原因 在点击获取数据前 先调用了一个数据清空，导致在获取数据的时候是空串。 总结 表单数据获取的时候，如果是页面加载好直接获取，就是空串，需要将函数定义在页面加载完成之后，再者，如果调用前使用了其他函数，最好看看是否对数据进行了其他更改 ...
Ajax中的serialize()、serializeArray()获取form表单中的全部输入数据
白骨梦儿
12-13 2338
前言：在提交一个表单时，使用Ajax向后台发送请求，需要dict类型的数据data；我们如何获取模态对话框里面的数据？ 方式：https://blog.csdn.net/ak739105231/article/details/103528026 一、其中有一种方式会使用serialize() 首先，serialize()方式获取到的模态对话框中的全部输入值，是可以不经过数据类型转换直接在aj...
serializeArray()方法获取到空数组
forljnlearning的博客
06-26 1025
该方法是获取表单中输入的内容 获取到了空数组有可能是因为input元素中没有设置name属性 实例 function serializeArrayToJson(form){ var obj = {}; var f = form.serializeArray(); f.forEach(function(item){ obj[item.name] = item.value; }) return obj; } ...
JQ在表单保存时获取input和select的val值
最新发布
04-01
<think>嗯，用户之前问过关于jQuery获取input值显示undefined的问题，现在又问如何在表单保存时获取input和select的val值。看起来他们可能在开发一个表单功能，遇到了数据获取的问题。需要确保他们能正确获取各种表单元素的值，而不仅仅是input。 首先，我得考虑用户可能遇到的具体情况。表单里可能有不同类型的input，比如text、radio、checkbox，还有select下拉框。不同的元素获取值的方法可能不同，比如checkbox需要用prop('checked')，而select可能有单选和多选的情况。 用户之前的问题中，已经提到了选择器错误、DOM加载时机等问题，所以这次可能需要更详细地覆盖不同类型的表单元素。要确保用户知道每个类型该怎么处理，特别是容易出错的地方，比如多选select的处理，或者radio组的取值方法。 另外，用户提到“表单保存时”，可能是在提交表单前验证或收集数据。这时候需要统一获取所有字段的值，可能组装成对象或者JSON。用户可能需要示例代码来展示如何遍历表单元素，并处理各种类型。 还要注意动态添加的表单元素，确保选择器能正确捕获到它们。可能需要提醒用户使用事件委托或者确保代码在DOM加载后执行。此外，表单重复提交或者异步提交的问题也可能相关，但用户当前的问题集中在获取值，所以可能暂时不需要深入讨论这些。 最后，要检查是否有常见的错误点，比如元素没有name或id，或者表单结构不正确。提供完整的示例代码可以帮助用户对照自己的代码，找出问题所在。同时，补充建议部分可以包括使用开发者工具调试，或者检查表单元素是否存在重复ID等问题。</think>在表单保存时通过jQuery获取input和select的值，需要注意不同表单元素的取值方式。以下是具体实现方法和常见问题解决方案： --- ### 📝 核心方法：统一取值逻辑 ```javascript // 表单保存事件示例 $("#saveBtn").click(function() { // 获取所有表单数据 let formData = {}; // 1.处理普通input $("input[type='text'], input[type='email'], input[type='password']").each(function() { formData[$(this).attr('name')] = $(this).val(); }); // 2.处理单选按钮radio $("input[type='radio']:checked").each(function() { formData[$(this).attr('name')] = $(this).val(); }); // 3.处理复选框checkbox $("input[type='checkbox']:checked").each(function() { formData[$(this).attr('name')] = $(this).val(); }); // 4.处理select下拉框 $("select").each(function() { formData[$(this).attr('name')] = $(this).val(); }); console.log(formData); // 后续可发送到服务器 }); ``` --- ### 🔍 重点注意事项 #### 1. Select下拉框特殊处理 ```html <!-- 单选下拉框 --> <select name="city" id="citySelect"> <option value="bj">北京</option> <option value="sh">上海</option> </select> <!-- 多选下拉框 --> <select name="skills" id="skillSelect" multiple> <option value="js">JavaScript</option> <option value="python">Python</option> </select> ``` ```javascript // 单选下拉框取值 $("#citySelect").val(); // 返回选中项的value // 多选下拉框取值（返回数组） $("#skillSelect").val(); // 例如 ["js", "python"] ``` #### 2. 复选框组处理 ```html <input type="checkbox" name="hobby" value="music"> 音乐 <input type="checkbox" name="hobby" value="sports"> 运动 ``` ```javascript // 获取所有选中的值（数组） let hobbies = []; $("input[name='hobby']:checked").each(function() { hobbies.push($(this).val()); }); formData.hobbies = hobbies; ``` #### 3. 单选框组处理 ```html <input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女 ``` ```javascript // 获取选中项的值 let gender = $("input[name='gender']:checked").val(); formData.gender = gender || ""; // 处理未选择情况 ``` --- ### ⚠️ 常见问题排查 1. **返回值undefined的情况** - 检查元素是否加载完成（使用`$(document).ready()`） - 确认选择器是否正确（`$("#elementID")`而不是`$("elementID")`） - 验证元素是否具有`name`属性 2. **多选下拉框返回字符串的问题** ```javascript // 错误现象：多选时返回字符串而非数组 // 解决方案：强制转换为数组 let skills = $("#skillSelect").val() || []; ``` 3. **动态添加的表单元素** ```javascript // 使用事件委托监听动态元素 $(document).on("change", ".dynamic-field", function() { console.log($(this).val()); }); ``` --- ### 💡 完整示例代码 ```html <form id="myForm"> <input type="text" name="username" value="张三"> <select name="city"> <option value="bj" selected>北京</option> <option value="sh">上海</option> </select> <input type="radio" name="gender" value="male" checked> 男 <input type="radio" name="gender" value="female"> 女 <input type="checkbox" name="hobby" value="music" checked> 音乐 <input type="checkbox" name="hobby" value="sports"> 运动 </form> <button id="saveBtn">保存表单</button> <script> $(document).ready(function() { $("#saveBtn").click(function() { let formData = { username: $("input[name='username']").val(), city: $("select[name='city']").val(), gender: $("input[name='gender']:checked").val(), hobbies: $("input[name='hobby']:checked").map(function() { return $(this).val(); }).get() // 转换为数组 }; console.log(formData); /* 输出示例： { username: "张三", city: "bj", gender: "male", hobbies: ["music"] } */ }); }); </script> ``` --- ### 🛠 补充建议 - 使用`serialize()`快速获取表单数据： ```javascript let formData = $("#myForm").serialize(); // 生成字符串：username=张三&city=bj&gender=male&hobby=music ``` - 对于复杂表单推荐使用`serializeArray()`： ```javascript let formArray = $("#myForm").serializeArray(); // 返回对象数组：[{name: 'username', value: '张三'}, ...] ``` - 使用浏览器开发者工具（F12）检查元素绑定状态
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值