php+js處理大量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的方式將擷取的傳參處理成數組再插入資料庫會比較方便。