jQuery 快速處理”多欄位表單”

多欄位表單 之封面圖

實作”多欄位表單”時,處理上如果以宣告變數的方式,即使盡量寫的很簡潔也會造成js的部分看起來很繁雜,尤其是大部分的資料為了安全性檢查都是在後端處理為主,因此前端的開發傳值以能快速開發為主。

 

流程

我們假設有一個表單如下
<input type=”text” name=”input1”/>
<input type=”text” name=”input2”/>
<input type=”text” name=”input3”/>
<input type=”text” name=”input4”/>
<input type=”text” name=”input5”/>
<input type=”text” name=”input6”/>
<input type=”text” name=”input7”/>
<input type=”text” name=”input8”/>
<input type=”text” name=”input9”/>
<input type=”text” name=”input10”/>

一般來說我們的寫法會是:
let val1 = $(“input[name=input1]”).val();
let val2 = $(“input[name=input2]”).val();
let val3 = $(“input[name=input3]”).val();

然後宣告ajax的data
let data = {val1:val1,val2:val2,val3:val3};

以js的serializeArray優化後則是:

var formArray = $(‘form-id‘).find(‘:input’).serializeArray();
var formData = {};
$.each(formArray, function(i, field){
formData[field.name] = field.value;
});

 

因為單純serializeArray之後會長成這個格式:
多欄位表單 之範例圖
跟我們要送到後端的格式不太一樣所以需要另外做處理,但即使如此code依然簡潔許多,而且在不同表單此段code還可以不管欄位重複使用。

若是有需求需要另外增加傳到後台的數據,也可以以以下方式處理:
formData[“extraval1”] = “extraval1”;
formData[“extraval2”] = “extraval2”;
..
..

後端的接收處理也非常簡單,為了方便說明以php code做為示例:

unset($_POST[“extraval1”]);
unset($_POST[“extraval2”]);
//把不必要的資料處理完後移除
$data=$_POST;
//做對應處理

如果不需任何處理,這個格式也是使用上很方便,只要經過簡單處理(甚至不用),就可以直接insert進資料庫。

 

同樣的,假設遇到編輯或是處理完需要把值填回表單的情況,也有比較簡化的作法:

我們將值回傳時的架構設為
var data = {input1: ‘val1’, input2: ‘val2’, input name: value};

使用如下的方法:

多欄位表單 之範例圖
就會自動將值代回屬於其的input欄位。

結論

即使一開始寫法上需要適應,但只要遵循開發原則,使用這個方式可以快速開發表單的新增編輯修改,且在不同的程式上可以重用,而且欄位越多越複雜時節省的時間越可觀,在開發大量表單填寫需求的程式時可以有效的加速開發進程。


發佈留言

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料