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 相关文章推荐
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 Javascript
JavaScript 语句之常用 for 循环详解
Mar 29 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
ThinkPHP之import方法实例详解
2014/06/20 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
js 替换
2008/02/19 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
jQuery实现跨域
2015/02/03 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
解决axios post 后端无法接收数据的问题
2019/10/29 Javascript
JavaScript枚举选择jquery插件代码实例
2020/11/17 jQuery
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python实现2014火车票查询代码分享
2014/01/10 Python
python发腾讯微博代码分享
2014/01/10 Python
python自动化测试之连接几组测试包实例
2014/09/28 Python
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
python 多线程串行和并行的实例
2019/02/22 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
护理学专业推荐信
2013/12/03 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
供货协议书范本
2014/04/22 职场文书
珍惜资源的建议书
2014/08/26 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
党纪处分决定书
2015/06/24 职场文书
中学教师读书笔记
2015/07/01 职场文书
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫