提交表单时，两个相同id字段造成的问题

最新推荐文章于 2021-11-26 14:38:53 发布
最新推荐文章于 2021-11-26 14:38:53 发布
阅读量422 收藏
点赞数
原文链接：https://my.oschina.net/TQNWvb/blog/143817
版权

    翻看笔记，看到刚工作时遇到的一个问题，虽小但很有意思，贴出来。

在提交表单的时候，input中没有任何内容，但是提交到后台后显示为一个逗号，用firebug查看，该字段值也是逗号，搞了半天，原来是表单中有两个相同id的元素，页面当做一个数组来处理了，比如，两个都为空，则变为[,]

转载于:https://my.oschina.net/TQNWvb/blog/143817

chenglianmang2259
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ant Design的Form组件中FormItem名称相同引起的问题
weixin_30845171的博客
06-29 1097
1、问题描述 在使用Antd组件Form表单的过程中，会出现FormItem同名的情况，此时要特别注意同名引起的表单行为异常问题，主要表现在以下方面： （1）同名表单项的值共享，并且其中一个的值改变，另外的同名表单的值也一致改变。 （2）同名表单中，表单控件比如<Input />的onChange等事件会出现行为异常的情况。 源码如下图所示： impor...
Extjs4 表单id值相同会造成界面混乱
小新新的专栏
05-20 1592
树形结构分支出两个叶子，在这两个叶子里面分别都含有表单，当点击的时候，第一个展开会很正常，但是第二个展开就会出现界面混乱。原因是两个表单里面的id值相同了，改为不同，而name改为相同，提交到后台还是可以用同样的方法来处理的。
IE中form元素中的name与id是相同的
iteye_2678的博客
12-10 96
&lt;script type="text/javascript"&gt; function testIECase(name){ alert(document.getElementById(name).value); } &lt;/script&gt; &lt;hr /&gt; 在ie中获取第一个匹配txtName的元素，name="txtNa...
form 表单类型，form 表单中实现同名字段的提交（基于 PHP）
kikajack的博客
01-30 3358
1. form 表单的 Content-Type 类型 1.1 通过 HTTP 的 POST 方式提交数据时，常见的数据类型有四种： application/x-www-form-urlencoded（ 表单默认数据类型） multipart/form-data（ 表单可以通过添加 enctype 属性实现："） application/json （AJAX 中常用。PHP 无法通过 $
两张字段一样类型一样的表复制顺序不同影响分析
wtfsb的博客
09-04 130
两表复制，顺序不同没关系可以用insert into 表1 select *from 表2
E9两个字段值比较限制提交.rar
09-09
标题“E9两个字段值比较限制提交”暗示了这是一个关于前端表单验证的问题，涉及到E9和E8两个可能的系统环境或组件。E9和E8可能是特定的应用程序框架、开发工具或者业务系统的版本号。在这个场景中，我们需要确保用户...
.NET Core使用HttpClient进行表单提交时遇到的问题
10-15
通过这样的调整，C#代码应该能够正确地构造出与Postman相匹配的`multipart/form-data`请求，从而解决表单提交时出现的参数错误问题。在实际开发过程中，建议使用网络调试工具（如Wireshark或Fiddler）来捕获和比较...
提交表单时执行func方法实现代码
10-27
这里的`onsubmit`属性非常重要，它指定了当表单提交时应调用的JavaScript函数。在这个例子中，我们调用了`MyForm`函数，并期望其返回值为布尔类型，如果返回`false`，则阻止表单的默认提交行为（即向服务器发送数据...
jQuery提交多个表单的小例子
12-09
4. **表单元素**：两个`<form>`标签定义了两个不同的表单，每个都有一个唯一的名称和处理动作。在这个例子中，`form1`的处理动作是`handleForm1Action`，`form2`的处理动作是`handleForm2Action`。 5. **提交按钮**...
JS两种类型的表单提交方法实例分析
11-27
在实际应用中，还可以结合使用这两种方法，例如，使用JavaScript手动提交表单，但仍然在`onsubmit`中设置一个简单的验证作为备选，以防JavaScript被禁用。无论采用哪种方式，确保表单验证的健壮性和用户体验的良好性...
MySQL中两个表字段名相同导致的一个问题
走出憧憬的专栏
06-15 7962
  今天在对两个表进行查询的时候，由于两个表的有已个字段名是相同的，最终导致了查询结果不是我要的，该问题导致我检查了很久啊。大致如下:表A字段:PID,PName,PNote表B字段:PID,Money,PayDate查询语句如下:SELECT　PID,PName,(SELECT SUM(Money) FROM B WHERE PID=PID) TotalMoney ,PN
form表单提交时多个相同name属性问题解决方案一
热门推荐
老关的博客
02-13 2万+
1. 问题背景 2. 解决方法 2.1. 后台处理 2.2. 前端处理 2.2.1. 分析 2.2.2. 解决 1 问题背景 项目中有这样的需求：根据不同的业务逻辑填写不同的表单提交到数据库中， 但是不同的表单之间又有一些字段是一样的，也就是说在form表单里存在多个name值相同的 input输入框，这样在提交的时候就会有这么一个问题，有几个相同name的值提交， ...
struts-spring-hibernate 框架 action 请求 ,form 表单提交 id 重复问题
微醺岁月的博客
12-24 787
struts-spring-hibernate 框架 action 请求 ,form 表单提交 id 重复问题struts-spring-hibernate 框架 action 请求 ,form 表单提交 id 重复问题： 这是今天调试程序出现的问题，不应该说是bug，是一个使用框架是 需要注意的问题： 我在进行购物车模块编写的过程中，提交表单的时候，提交不同的商品，但是当 请求到达action
form表单校验多个相同的name
weixin_43920582的博客
11-26 1233
场景 在一个form表单中有多个相同的name需要校验 <form id="form" method="post" action="http:xxxx.com"> <input type="text" name="username" /> <input type="text" name="username" /> <input type="submit" value="提交" /> </form> 问题 在一个表单中如果有多个相同的n
浅析html中的表单属性name和id对于表单提交时候的影响
weixin_34301132的博客
12-04 343
2019独角兽企业重金招聘Python工程师标准>>> ...
在线表单字段做为节点处理人
weixin_30540691的博客
12-30 91
1.1. 功能描述 通常我们在使用在线表单时会有这样的一个需求，就是我下一个环节或者后面的某个环节要使用在线表单中的某个字段来做为处理人。 1.2. 设置方法 首先需要将流程定义与表单应用配置好，形成流程应用后再重新进入流程定义中配置。如下图所示，我们在周报中需要将“主管负责人”做为下一节点及后面节点的处理人。 配置方法如下： 如下图中选择字段，注意选择的字段填写的...
html中有两个相同id的元素
weixin_43939111的博客
08-18 2283
从原则上来讲，html中id名称是唯一的，但在平时做项目中发现，出现相同的id值并不会报错，以下总结两个特点： 根据id设置的css样式同样会显现。 根据id触发元素事件，只有第一个元素有效
sql重复数据处理，有唯一ID，formid有重复,留一条
米粒
05-07 706
/*sql重复数据处理，有唯一ID，formid有重复*//*查出重复的fromid*/select formid from GaiaSaver_BUG group by formid having count(*)>1/*删除重复formid，只留一条*/delete from GaiaSaver_BUG  where ID not in(select   min
layui表单根据两个字段进行排序
最新发布
05-30
如果你想在Layui表单中根据两个字段进行排序，可以使用Layui的table模块和form模块结合起来实现。以下是一个简单的示例： 1. HTML代码 ```html <table class="layui-table" id="table"> <thead> <tr> <th>名称</th> <th>排序1</th> <th>排序2</th> </tr> </thead> <tbody> <tr> <td>第一行</td> <td> <input type="text" name="sort1" lay-verify="required|number" value="1" class="layui-input"> </td> <td> <input type="text" name="sort2" lay-verify="required|number" value="1" class="layui-input"> </td> </tr> <tr> <td>第二行</td> <td> <input type="text" name="sort1" lay-verify="required|number" value="1" class="layui-input"> </td> <td> <input type="text" name="sort2" lay-verify="required|number" value="2" class="layui-input"> </td> </tr> <tr> <td>第三行</td> <td> <input type="text" name="sort1" lay-verify="required|number" value="2" class="layui-input"> </td> <td> <input type="text" name="sort2" lay-verify="required|number" value="1" class="layui-input"> </td> </tr> </tbody> </table> ``` 2. JavaScript代码 ```javascript layui.use(['table', 'form'], function() { var table = layui.table; var form = layui.form; //渲染表格 table.render({ elem: '#table', cols: [ [ { field: 'name', title: '名称' }, { field: 'sort1', title: '排序1', edit: 'text' }, { field: 'sort2', title: '排序2', edit: 'text' } ] ], data: [ { name: '第一行', sort1: 1, sort2: 1 }, { name: '第二行', sort1: 1, sort2: 2 }, { name: '第三行', sort1: 2, sort2: 1 } ] }); //监听单元格编辑事件 table.on('edit(table)', function(obj) { var rowIndex = obj.tr.data('index'); //获取当前行索引 var field = obj.field; //获取当前编辑的字段名 var value = obj.value; //获取修改后的值 //更新数据源中对应行的数据 table.cache['table'][rowIndex][field] = value; }); //监听表单提交事件 form.on('submit(save)', function(data) { //获取表单数据 var formData = data.field; //按照排序1和排序2字段的值进行排序 var sortedData = table.cache['table'].sort(function(a, b) { if (a.sort1 == b.sort1) { return a.sort2 - b.sort2; } else { return a.sort1 - b.sort1; } }); console.log(sortedData); //在这里可以将排序后的数据提交到后台进行处理 return false; //阻止表单跳转 }); }); ``` 在这个示例中，我们使用table.render()方法渲染表格，并设置了两个可以编辑的单元格来实现按照两个字段排序。在单元格编辑事件中，我们获取当前行的索引、当前编辑的字段名和修改后的值，然后更新数据源中对应行的数据。最后，在表单提交事件中，我们按照排序1和排序2字段的值进行排序，然后将排序后的数据提交到后台进行处理。 希望这个示例对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值