腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

jQuery解決input超多的表單提交

更新時(shí)間：2015年08月10日 11:32:31 投稿：hebedich

本文給大家分享的是使用jQuery+php解決input超多的表單提交的思路和方法，非常的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。

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

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

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

表單組成部分

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

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

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

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

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

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

表單GET部分

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

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

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

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

程序代碼如下：

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

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

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

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线