jQuery解决input超多的表单提交


Posted in Javascript onAugust 10, 2015

近段时间接到一个比较奇葩的需求,对方要求在企业站中加入一个类似word的表单,并供用户在线填写与提交。

仔细看了一下,该表单的字段高达一百多个,这个量级是相当可怕的。如果每个input手动去填写id和name的话,该是一个多么可怕的体力活啊。

反复思考了一下,为避免苦逼的去逐个填写input的id与name,决定用JS配合PHP的方式来解决这个表单一连串的提交工作。

表单组成部分

表单首先按照客户的要求,将需要填写的表格与选项按照word文档的原型进行布局,使其符合用户体验,如下图:

jQuery解决input超多的表单提交

(上图只是截取表单的一小部分作为范例,实际上这个表单是无比之大的)

当表单的html布局完成之后,我们就需要开始对这些表单的input设定id与name用于表单提交了。

前言中已经说道到了input非常多,所以我们这里采用JS的方式来为input自动添加id与name。代码如下(jquery方式):

$(document).ready(function(){
var inputNum = 0;
$(‘input').each(function(){
$(this).attr({name:‘val'+inputNum,id:‘val'+inputNum});
inputNum++
})})

通过js处理后,该页面的所有input都会自动按照自增1的方式对id和name进行添加。至此,这个表单的基本上可以正常使用了。(frome咱就不解释了,程序员都懂的。)

表单GET部分

OK,上面已经可以正常的把表单提交到PHP程序中进行处理了。当然上面的办法也适用于任何一种web程序,比如说.net,jsp,asp等等…..

下一步我们就需要对提交过来的字符串进行拆解,以获取表单内的值。关于如何获取表单的传值,本文就不做解释了。

由于表单传过来的值也是N个,所以我们也不可能一个一个的去写数组变量来获取这些值,所以这里也需要用到一些办法来处理。

好,下面我们来说正事。首先我们按照之前的js程序逻辑来思考,如何让这些数组每个自增1来实现数组的输出。

程序代码如下:

<?php
$num = 0; //初始化计数变量
$_REQUEST[‘val'.$num]; $num++; //插入到需要获取值的地方,每个需要获取传值的地方重复使用这串代码即可
?>

这组代码主要用在表单input与request顺序一致的情况下使用,如果不能一一对应顺序的话,则会出现混乱。因此用的时候需要慎重!

提交数据库的时候可以考虑使用foreach的方式将获取的传参处理成数组再插入数据库会比较方便。

Javascript 相关文章推荐
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
详解Angular 开发环境搭建
Jun 22 Javascript
React组件生命周期详解
Jul 03 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
package.json各个属性说明详解
Mar 11 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 #Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 #Javascript
javascript中caller和callee详解
Aug 10 #Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 #Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 #Javascript
jQuery中$(function() {});问题详解
Aug 10 #Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 #Javascript
You might like
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
详解php命令注入攻击
2019/04/06 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
使用js画图之饼图
2015/01/12 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
详解python中的json的基本使用方法
2016/12/21 Python
python妙用之编码的转换详解
2017/04/21 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
英国工具中心:UK Tool Centre
2017/07/10 全球购物
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
经典的班主任推荐信
2013/10/28 职场文书
测绘工程系学生的自我评价
2013/11/30 职场文书
科级干部考察材料
2014/02/15 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
教师个人自我评价
2015/03/04 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
保留意见审计报告
2015/06/05 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书