jQuery解決input超多的表單提交
近段時間接到一個比較奇葩的需求，對方要求在企業(yè)站中加入一個類似word的表單，并供用戶在線填寫與提交。
仔細(xì)看了一下，該表單的字段高達(dá)一百多個，這個量級是相當(dāng)可怕的。如果每個input手動去填寫id和name的話，該是一個多么可怕的體力活啊。
反復(fù)思考了一下，為避免苦逼的去逐個填寫input的id與name，決定用JS配合PHP的方式來解決這個表單一連串的提交工作。
表單組成部分
表單首先按照客戶的要求，將需要填寫的表格與選項按照word文檔的原型進(jìn)行布局，使其符合用戶體驗，如下圖：
（上圖只是截取表單的一小部分作為范例，實(shí)際上這個表單是無比之大的）
當(dāng)表單的html布局完成之后，我們就需要開始對這些表單的input設(shè)定id與name用于表單提交了。
前言中已經(jīng)說道到了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進(jìn)行添加。至此，這個表單的基本上可以正常使用了。（frome咱就不解釋了，程序員都懂的。）
表單GET部分
OK,上面已經(jīng)可以正常的把表單提交到PHP程序中進(jìn)行處理了。當(dāng)然上面的辦法也適用于任何一種web程序，比如說.net，jsp，asp等等…..
下一步我們就需要對提交過來的字符串進(jìn)行拆解，以獲取表單內(nèi)的值。關(guān)于如何獲取表單的傳值，本文就不做解釋了。
由于表單傳過來的值也是N個，所以我們也不可能一個一個的去寫數(shù)組變量來獲取這些值，所以這里也需要用到一些辦法來處理。
好，下面我們來說正事。首先我們按照之前的js程序邏輯來思考，如何讓這些數(shù)組每個自增1來實(shí)現(xiàn)數(shù)組的輸出。
程序代碼如下：
<?php $num = 0; //初始化計數(shù)變量 $_REQUEST[‘val'.$num]; $num++; //插入到需要獲取值的地方，每個需要獲取傳值的地方重復(fù)使用這串代碼即可 ?>
這組代碼主要用在表單input與request順序一致的情況下使用，如果不能一一對應(yīng)順序的話，則會出現(xiàn)混亂。因此用的時候需要慎重！
提交數(shù)據(jù)庫的時候可以考慮使用foreach的方式將獲取的傳參處理成數(shù)組再插入數(shù)據(jù)庫會比較方便。
- input 輸入框獲得/失去焦點(diǎn)時隱藏/顯示文字(jquery版)
- jquery顯示隱藏input對象
- jQuery實(shí)現(xiàn)表單input中提示文字value隨鼠標(biāo)焦點(diǎn)移進(jìn)移出而顯示或隱藏的代碼
- jQuery 隱藏和顯示 input 默認(rèn)值示例
- jQuery通過改變input的type屬性實(shí)現(xiàn)密碼顯示隱藏切換功能
- jquery form 隱藏的input 選擇
- jQuery響應(yīng)鼠標(biāo)事件并隱藏與顯示input默認(rèn)值
- jquery獲取form表單input元素值的簡單實(shí)例
- jQuery獲取及設(shè)置表單input各種類型值的方法小結(jié)
- jquery 動態(tài)增加,減少input表單的簡單方法(必看)
- jQuery實(shí)現(xiàn)提交表單時不提交隱藏div中input的方法
相關(guān)文章
國外著名博客WDL發(fā)布了2011年度最佳 jQuery 插件。jQuery 自2006年發(fā)布以來，經(jīng)過五年的迅速發(fā)展，目前已是最流行和使用最廣泛的 JavaScript 框架2012-03-03
jQuery實(shí)現(xiàn)動畫、消失、顯現(xiàn)、漸出、漸入效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)動畫、消失、顯現(xiàn)、漸出、漸入效果,結(jié)合實(shí)例形式分析了jQuery中animate()、hide()、show()、slideUp()、slideDown()、slideToggle()、fadeOut()、fadeIn()等方法簡單使用技巧,需要的朋友可以參考下2018-09-09
jQuery中each循環(huán)的跳出和結(jié)束實(shí)例
下面小編就為大家?guī)硪黄猨Query中each循環(huán)的跳出和結(jié)束實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
jQuery仿360導(dǎo)航頁圖標(biāo)拖動排序效果代碼分享
這篇文章主要為大家詳細(xì)介紹了360導(dǎo)航頁圖標(biāo)拖動排序效果代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-08-08
jPlayer是一個JavaScript寫的完全免費(fèi)和開源的jQuery多媒體庫插件，這篇文章主要介紹了基于jPlayer三分屏的制作方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
jquery實(shí)現(xiàn)可點(diǎn)擊伸縮與展開的菜單效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)可點(diǎn)擊伸縮與展開的菜單效果代碼,涉及jquery鼠標(biāo)click事件控制頁面元素樣式變換的實(shí)現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了jQuery繼承extend用法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
jQuery實(shí)現(xiàn)兩列等高并自適應(yīng)高度
想要使用jQuery實(shí)現(xiàn)兩列等高并自適應(yīng)高度，其實(shí)也很簡單，原理就是取得左右兩邊的高度，然后判斷這個值，把大的值賦給小的就行了。下面就跟小編一起來看下吧2016-12-12
這篇文章主要介紹了一個jquery驗證手機(jī)號是否正確的實(shí)踐案例，利用正則表達(dá)式進(jìn)行驗證，感興趣的小伙伴們可以參考一下2015-11-11
jQuery實(shí)現(xiàn) RadioButton做必選校驗功能
這篇文章主要介紹了jQuery實(shí)現(xiàn) RadioButton做必選校驗功能的相關(guān)資料,需要的朋友可以參考下2017-06-06