近段時(shí)間接到一個(gè)比較奇葩的需求，對(duì)方要求在企業(yè)站中加入一個(gè)類(lèi)似word的表單，并供用戶(hù)在線填寫(xiě)與提交。

仔細(xì)看了一下，該表單的字段高達(dá)一百多個(gè)，這個(gè)量級(jí)是相當(dāng)可怕的。如果每個(gè)input手動(dòng)去填寫(xiě)id和name的話(huà)，該是一個(gè)多么可怕的體力活啊。

反復(fù)思考了一下，為避免苦逼的去逐個(gè)填寫(xiě)input的id與name，決定用JS配合PHP的方式來(lái)解決這個(gè)表單一連串的提交工作。

表單組成部分

表單首先按照客戶(hù)的要求，將需要填寫(xiě)的表格與選項(xiàng)按照word文檔的原型進(jìn)行布局，使其符合用戶(hù)體驗(yàn)，如下圖：

（上圖只是截取表單的一小部分作為范例，實(shí)際上這個(gè)表單是無(wú)比之大的）

當(dāng)表單的html布局完成之后，我們就需要開(kāi)始對(duì)這些表單的input設(shè)定id與name用于表單提交了。

前言中已經(jīng)說(shuō)道到了input非常多，所以我們這里采用JS的方式來(lái)為input自動(dòng)添加id與name。代碼如下（jquery方式）：

$(document).ready(function(){
var inputNum = 0;
$(‘input').each(function(){
$(this).attr({name:‘val'+inputNum,id:‘val'+inputNum});
inputNum++
})})

通過(guò)js處理后，該頁(yè)面的所有input都會(huì)自動(dòng)按照自增1的方式對(duì)id和name進(jìn)行添加。至此，這個(gè)表單的基本上可以正常使用了。（frome咱就不解釋了，程序員都懂的。）

表單GET部分

OK,上面已經(jīng)可以正常的把表單提交到PHP程序中進(jìn)行處理了。當(dāng)然上面的辦法也適用于任何一種web程序，比如說(shuō).net，jsp，asp等等…..

下一步我們就需要對(duì)提交過(guò)來(lái)的字符串進(jìn)行拆解，以獲取表單內(nèi)的值。關(guān)于如何獲取表單的傳值，本文就不做解釋了。

由于表單傳過(guò)來(lái)的值也是N個(gè)，所以我們也不可能一個(gè)一個(gè)的去寫(xiě)數(shù)組變量來(lái)獲取這些值，所以這里也需要用到一些辦法來(lái)處理。

好，下面我們來(lái)說(shuō)正事。首先我們按照之前的js程序邏輯來(lái)思考，如何讓這些數(shù)組每個(gè)自增1來(lái)實(shí)現(xiàn)數(shù)組的輸出。

程序代碼如下：

<?php
$num = 0; //初始化計(jì)數(shù)變量
$_REQUEST[‘val'.$num]; $num++; //插入到需要獲取值的地方，每個(gè)需要獲取傳值的地方重復(fù)使用這串代碼即可
?>

這組代碼主要用在表單input與request順序一致的情況下使用，如果不能一一對(duì)應(yīng)順序的話(huà)，則會(huì)出現(xiàn)混亂。因此用的時(shí)候需要慎重！

提交數(shù)據(jù)庫(kù)的時(shí)候可以考慮使用foreach的方式將獲取的傳參處理成數(shù)組再插入數(shù)據(jù)庫(kù)會(huì)比較方便。

最新評(píng)論