如何提交多个具有相同name属性的表单
有的时候我们会遇到这样一个需求,一个用户页面中有多条履历信息,每条履历信息对应数据表中的一条记录,用户可以进行添加或修改,点击保存时同时提交到了后台。有两个难点:1、前端怎样一次性提交多条履历信息?2、后台如何获取 form 表单提交的多个 name 属性值相同的 input 标签中的值?
例如:
<form action="test.php" method="post" enctype="application/x-www-form-urlencoded">
姓名:<input type="text" name="name">
年龄:<input type="text" name="age">
<hr>
姓名:<input type="text" name="name">
年龄:<input type="text" name="age">
<input type="submit" class="submit">
</form>
在这个表单中共有两个字段:姓名,年龄。这两个字段的input中的name属性值都相同 。如果我们用默认的表单提交方式:分成两个表单分别提交,那只能提交一个表单的信息;如果放在一个表单中直接提交,那后台只能获取表单中的最后一条信息,因为name属性值相同,后面的信息会覆盖前面的信息。这个时候就必须使用另一种方法了。
1、纯文本内容的表单提交
首先,我们要重新处理表单代码,将name属性中的属性值后面加一个[],加上[]相当于把值放入一个数组中 ,这样就不用担心后面的值会覆盖前面的值了。
<form action="test.php" method="post" enctype="application/x-www-form-urlencoded">
姓名:<input type="text" name="name[]">
年龄:<input type="text" name="age[]">
<hr>
姓名:<input type="text" name="name[]">
年龄:<input type="text" name="age[]">
<input type="submit" class="submit">
</form>
当然,你也可以手动修改name属性中的值,添加一个标志,让它们变的不同,但比较麻烦,而且后台获取到之后处理起来比较麻烦。
现在页面修改完成,后台直接使用var_dump($_POST)打印一下前端传来的结果。
结果如下:
可以看到,后台接收到的数据是一个二维数组,key为表单中的name属性值。后台接收到之后再进行处理
for($i=0;$i<count($_POST['name']);$i++){
$arr[$i]=array_column($_POST,$i);
}
var_dump($arr);
结果如下:
2、包含文件的表单提交
和纯文本表单上传一样,我们可以通过数组的方式提交表单信息。然后打印$_FILES数组
结果如下:
当然,除了这种方式还有另一种方式,那就是使用ajax提交。
代码如下:
<form enctype="multipart/form-data">
姓名:<input type="text" name="name">
年龄:<input type="text" name="age">
<input type="file" name="pic">
<hr>
姓名:<input type="text" name="name">
年龄:<input type="text" name="age">
<input type="file" name="pic">
</form>
<input type="submit" class="submit">
</body>
<script>
$('.submit').click(function () {
var form = $('form')[0];
var formdata = new FormData(form);
$.ajax({
url: 'test.php',
data: formdata,
type: 'post',
dataType: "json",
contentType: false,
processData: false,
success: function (data) {
// code…………
}
});
});
</script>
FormData是js中的的一个对象,无需引入其它库可以直接使用。功能是将form表单元素的name与value进行组合,实现表单数据的序列化,从而减少表单元素的拼接,提高工作效率,也就是说可以代替表单提交。FormData的参数是一个DOM对象,使用Jquery方法时别忘了将获取的Jquery对象转换为DOM对象。之后再使用Ajax方法传给后台。其中contentType和processData属性的值都要设为false,功能是把表单中的enctype="application/x-www-form-urlencoded"转换为enctype="multipart/form-data",否则文件会提交失败。
既然使用ajax方式提交表单非常麻烦,那我们为什么还要使用呢,主要是为了实现异步传输。很多时候用户提交完表单后想要知道是否提交成功,而后台也需要返回一个信息给用户,指导用户的下一步操作。如果不使用异步传输,那在用户填写完信息并提交后,后台如果发现错误返回错误详细给用户时,表单页面已经刷新完毕了,之前填的信息都要重新填写一遍或是更多。非常的麻烦。
如何提交多个具有相同name属性的表单的更多相关文章
- 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值
$(function () { var wait = $("<img src=\"\" alt=\"正在上传\"/>"); $( ...
- HTML5 学习总结(二)——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
- HTML5 学习笔记(二)——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- HTML5 autocomplete属性、表单自动完成
autocomplete属性 1.定义autocomplete属性规范表单是否启用自动完成功能.自动完成允许浏览器对字段的输入,是基于之前输入的值.2.应用范围autocomplete使用<fo ...
- jQuery编程基础精华02(属性、表单过滤器,元素的each,表单选择器,子元素过滤器(*),追加方法,节点,样式操作)
属性.表单过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...
- 异步提交form的时候利用jQuery validate实现表单验证
异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则 // 电话号码验证 ...
- HTML5 Web Form 新增属性和表单验证
<form>标签的基本属性 method属性:指定浏览器向服务器传送数据的方式,可选: action属性:设置服务器接受和处理表单数据的URL: enctype属性:制定表单数据在发送到服 ...
- HTML5学习总结——HTML5新增属性与表单元素
一HTML5新增属性 1.1contcxtmcnu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> < ...
- Vue的指令系统、计算属性和表单输入绑定
指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...
随机推荐
- ABP 后台调用接口 获取返回的数据
原文:https://www.cnblogs.com/i3yuan/p/10703500.html insert 简单测试: public void test8() { string url = &q ...
- 洛谷p1747好奇怪的游戏题解
题目 永远不要怀疑劳动人民的智慧! 把快读里最后的return直接返回零的 我已经不是第一次写错了! 我要是再写错我就****** 主要是逆向思维,把从两个点往(1, 1)走想成从(1, 1)点往这两 ...
- iptables 表和链的对应关系
filter表 主要用于对数据包进行过滤,根据具体的规则决定是否放行该数据包(如DROP.ACCEPT.REJECT.LOG).filter 表对应的内核模块为iptable_filter,包含三个规 ...
- GCD(洛谷 2568)
题目描述 给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的数对(x,y)有多少对. 输入格式 一个整数N 输出格式 答案 输入输出样例 输入 #1 4 输出 #1 4 说明/提示 ...
- 窗体的keyPreview属性
如果把窗体的keyPreview属性设置为true,那么窗体将比其内的控件优先获得键盘事件的激活权.比如Form1和其内的文本框Text1都准备响应keyPress事件,那么以下代码将首先激活窗体的k ...
- 每日一问:讲讲 Java 虚拟机的垃圾回收
昨天我们用比较精简的文字讲了 Java 虚拟机结构,没看过的可以直接从这里查看: 每日一问:你了解 Java 虚拟机结构么? 今天我们必须来看看 Java 虚拟机的垃圾回收算法是怎样的.不过在开始之前 ...
- 利用docker实现私有镜像仓库
利用docker实现私有镜像仓库 在linux服务器上安装了docker过后,可以拉取docker镜像仓库: docker pull registry 再执行命令让镜像run起来: docker ru ...
- Buttons按扭
到目前为此,我们已经写了一些程序代码,但都只是输出,然而,有时我们也希望板子能处理一些输入,输入输出我们都是针对板子来说的.microbit板子上的两个按键是最显眼的输入,分别是A和B,mPython ...
- [转帖]关于 ./configure
./configure --prefix=/usr/local/scws --prefix选项是配置安装的路径,如果不配置该选项,安装后可执行文件默认放在/usr/local/bin,库文件默认放在/ ...
- yum 删除了,如何重新导入
说明:准备研究docker时遇到的问题,提示如下: [root@localhost116 yum-package]# rpm -ivh yum--.el6.centos.noarch.rpm warn ...