jQuery解決input超多的表單提交_jquery

近段時間接到一個比較奇葩的需求，對方要求在企業站中加入一個類似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來實現陣列的輸出。

程式碼如下：

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

這組程式碼主要用在表單input與request順序一致的情況下使用，如果不能一一對應順序的話，則會出現混亂。因此用的時候需要慎重！

提交資料庫的時候可以考慮使用foreach的方式將取得的傳參處理成數組再插入資料庫會比較方便。