jQuery解决input超多的表单提交
近段时间接到一个比较奇葩的需求，对方要求在企业站中加入一个类似word的表单，并供用户在线填写与提交。
仔细看了一下，该表单的字段高达一百多个，这个量级是相当可怕的。如果每个input手动去填写id和name的话，该是一个多么可怕的体力活啊。
反复思考了一下，为避免苦逼的去逐个填写input的id与name，决定用JS配合PHP的方式来解决这个表单一连串的提交工作。
表单组成部分
表单首先按照客户的要求，将需要填写的表格与选项按照word文档的原型进行布局，使其符合用户体验，如下图：
（上图只是截取表单的一小部分作为范例，实际上这个表单是无比之大的）
当表单的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的方式将获取的传参处理成数组再插入数据库会比较方便。
- input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
- jquery显示隐藏input对象
- jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
- jQuery 隐藏和显示 input 默认值示例
- jQuery通过改变input的type属性实现密码显示隐藏切换功能
- jquery form 隐藏的input 选择
- jQuery响应鼠标事件并隐藏与显示input默认值
- jquery获取form表单input元素值的简单实例
- jQuery获取及设置表单input各种类型值的方法小结
- jquery 动态增加,减少input表单的简单方法(必看)
- jQuery实现提交表单时不提交隐藏div中input的方法
相关文章
国外著名博客WDL发布了2011年度最佳 jQuery 插件。jQuery 自2006年发布以来，经过五年的迅速发展，目前已是最流行和使用最广泛的 JavaScript 框架2012-03-03
这篇文章主要介绍了jQuery实现动画、消失、显现、渐出、渐入效果,结合实例形式分析了jQuery中animate()、hide()、show()、slideUp()、slideDown()、slideToggle()、fadeOut()、fadeIn()等方法简单使用技巧,需要的朋友可以参考下2018-09-09
下面小编就为大家带来一篇jQuery中each循环的跳出和结束实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要为大家详细介绍了360导航页图标拖动排序效果代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-08-08
jPlayer是一个JavaScript写的完全免费和开源的jQuery多媒体库插件，这篇文章主要介绍了基于jPlayer三分屏的制作方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了jquery实现可点击伸缩与展开的菜单效果代码,涉及jquery鼠标click事件控制页面元素样式变换的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了jQuery继承extend用法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
想要使用jQuery实现两列等高并自适应高度，其实也很简单，原理就是取得左右两边的高度，然后判断这个值，把大的值赋给小的就行了。下面就跟小编一起来看下吧2016-12-12
这篇文章主要介绍了一个jquery验证手机号是否正确的实践案例，利用正则表达式进行验证，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了jQuery实现 RadioButton做必选校验功能的相关资料,需要的朋友可以参考下2017-06-06
最新评论