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 相关文章推荐
jquery $.ajax入门应用一
Nov 19 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
详解小程序缓存插件(mrc)
Aug 17 Javascript
javaScript实现游戏倒计时功能
Nov 17 Javascript
详解服务端预渲染之Nuxt(介绍篇)
Apr 07 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
Vue.js仿Select下拉框效果
Feb 18 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设计模式之迭代器模式
2016/06/17 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
php框架知识点的整理和补充
2021/03/01 PHP
js中判断控件是否存在
2010/08/25 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
Python中max函数用法实例分析
2015/07/17 Python
python常见的格式化输出小结
2016/12/15 Python
Python IDLE清空窗口的实例
2018/06/25 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
Python中按键来获取指定的值
2019/03/02 Python
对django中foreignkey的简单使用详解
2019/07/28 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
实例代码讲解Python 线程池
2020/08/24 Python
英国网上购买门:Direct Doors
2018/06/07 全球购物
简单的JAVA编程面试题
2013/03/19 面试题
英语专业应届生求职信范文
2013/11/15 职场文书
学生安全责任书
2014/04/15 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
付款承诺函范文
2015/01/21 职场文书
公证处委托书
2015/01/28 职场文书
大学生实习介绍信
2015/05/05 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
docker-compose部署Yapi的方法
2022/04/08 Servers