相信很多小伙伴都會遇到需要做表單的需求，就像我現在做的醫院項目，茫茫多的表單無窮無盡。一開始做表單使用最笨的方法：一個個span去定義ID，每個數據都用ajax獲取后賦值顯示，然后在表單提交前一個個用jQuery根據ID獲取元素的value，組成一個model來提交給服務器。
后來發現使用jQuery可以大大簡化這個過程。于是我修改了工作方法，總結了我的一些提高寫表單效率的方法。
需求
表單中存在最多的無非就是文本、文本框、單選框、多選框。而一些表單中會有幾十個甚至幾百個選項。我們的目標就是以最高的效率來完成這些表單的數據獲取和數據提交。
注意：如果元素ID和服務器上獲取的json字段的名字是一樣的，那么這篇文章或許能對你提高工作效率有所幫助。
文本和文本框
對于文本和文本框，我們通常需要為元素添加ID來綁定和獲取數據。
將數據顯示到界面中
- 用for循環遍歷解析成功的JSON數據
- 通過if判斷過濾數據是span的還是input的。
- 將數據傳給和數據名同名的ID元素。
for (var key in json) {
//過濾type為text的文本框
if ($('#' + key).attr('type') == 'text') {
$('#' + key).val(json[key]);
}
if($('#' + key).prop('tagName') == 'SPAN'){
$('#' + key).text(json[key]);
}
}
快速獲取數據對象用于提交服務器
- 定義空model對象。
- 通過jQuery選擇器獲取目標元素的value。
- 將數據傳入model中，對象元素的字段就是HTML元素的ID。
var model = {};
$('input[type="text"]').each(function () {
model[$(this).attr('id')]=$(this).val();
});
$('span').each(function () {
model[$(this).attr('id')]=$(this).text();
});
console.log(model);
按照如下方法，我們只需要照著后端提供的數據字段給HTML定義id，而JS就不需要寫太多代碼就可以完成表單了。再也不怕表單字段太多了。
全部代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.2.3.js"></script>
</head>
<body>
<div>
<div>
<label>姓名：<input type="text" id="name"></label>
<label>性別：<input type="text" id="sex"></label>
<label>年齡：<input type="text" id="age"></label>
<label>時間：<input type="text" id="time"></label>
</div>
<div>
<label>a：<span id="param01">1</span></label>
<label>b：<span id="param02">2</span></label>
<label>c：<span id="param03">3</span></label>
<label>d：<span id="param04">4</span></label>
</div>
</div>
<button onclick="showResult()">顯示結果</button>
<script>
//多條input或者span的快速賦值
//data是模擬服務器返回的JSON數據
var data = '{"name":"張三","sex":"女","age":22,"time":"2016-5-10","param01":111,"param02":222,"param03":333,"param04":444}';
//將數據顯示到頁面中
var json = eval('(' + data + ')');
for (var key in json) {
if ($('#' + key).attr('type') == 'text') {
$('#' + key).val(json[key]);
}
if($('#' + key).prop('tagName') == 'SPAN'){
$('#' + key).text(json[key]);
}
}
//獲取文本和文本框的內容轉為JSON對象
function showResult() {
var model = {};
$('input[type="text"]').each(function () {
model[$(this).attr('id')]=$(this).val();
});
$('span').each(function () {
model[$(this).attr('id')]=$(this).text();
});
console.log(model);
}
</script>
</body>
</html>
Radio和Checkbox
另外一種經常出現于表單中的就是radio、checkbox這些單選多選的元素了。這些元素通常用name命名一組選項。下面我同樣用jQuery簡化數據的顯示和提交。
顯示數據
和之前的文本一樣，用for循環遍歷json數據，然后通過if過濾后顯示到界面。不同之處是這邊是通過name來顯示和綁定數據的。
注：對radio和checkbox處理的方法寫在了后面，所以復制粘貼的同學們請注意別漏了~
for(var key in json){
if ($('input[name=' + key + ']').attr('type') == 'radio') {
showRadioValue(key, json[key]);
}
if ($('input[name=' + key + ']').attr('type') == 'checkbox') {
showCheckBoxValue(key, json[key]);
}
}
獲取數據model的方法
- 定義空model對象。
- 定義name避免重復添加。
- 遍歷所有radio獲取結果傳給model
- 遍歷所有checkbox獲取結果傳給model
function showResult() {
var model = {};
var radioName = '';
var checkboxName = '';
$("input[type='radio']").each(function () {
if($(this).attr('name') != radioName){
radioName = $(this).attr('name');
model[radioName] = getRadioValue(radioName);
}
});
$("input[type='checkbox']").each(function () {
if($(this).attr('name') != checkboxName){
checkboxName = $(this).attr('name');
model[checkboxName] = getCheckboxValue(checkboxName);
}
});
console.log(model);
}
處理radio和checkbox的一些方法
這里我對radio和checkbox的顯示和獲取結果寫了幾個方法。
function showRadioValue(name, value) {
$('input[name=' + name + ']').each(function () {
if(value == $(this).val()){
$(this).attr('checked', 'true');
}
});
}
function getRadioValue(name) {
var value = 0;
var i = 0;
$('input[name=' + name + ']' ).each(function () {
if ($('input[name=' + name + ']').eq(i).is( ':checked')) {
value = $('input[name=' + name + ']').eq(i).val();
return;
}
i++;
});
return value;
}
function showCheckBoxValue (name, value) {
var values = value.split(',' );
var row = 1;
$('input[name="' + name + '"]').each( function () {
if (values[row] == 1) {
$(this).attr("checked" , 'true');
}
row++;
});
}
function getCheckboxValue (name) {
var text = "" ;
$('input[name="' + name + '"]').each( function () {
var t = '' ;
if ($(this ).is(':checked')) {
t = "1";
} else {
t = "0";
}
text += "," + t;
});
return text;
}
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.2.3.js"></script>
</head>
<body>
<div>
<div>
<label><input type="radio" name="param01" value="1">1</label>
<label><input type="radio" name="param01" value="2">2</label>
<label><input type="radio" name="param01" value="3">3</label>
</div>
<div>
<label><input type="radio" name="param02" value="1">1</label>
<label><input type="radio" name="param02" value="2">2</label>
<label><input type="radio" name="param02" value="3">3</label>
</div>
<div>
<label><input type="radio" name="param03" value="1">1</label>
<label><input type="radio" name="param03" value="2">2</label>
<label><input type="radio" name="param03" value="3">3</label>
</div>
<div>
<label><input type="checkbox" name="param04">1</label>
<label><input type="checkbox" name="param04">2</label>
<label><input type="checkbox" name="param04">3</label>
<label><input type="checkbox" name="param04">3</label>
</div>
<div>
<label><input type="checkbox" name="param05">1</label>
<label><input type="checkbox" name="param05">2</label>
<label><input type="checkbox" name="param05">3</label>
<label><input type="checkbox" name="param05">3</label>
</div>
<button onclick="showResult()">顯示結果</button>
<label id="result">result</label>
</div>
<script>
//多條radio或者checkbox的快速賦值
var data = '{"param01":"1","param02":"3","param03":"2","param04":",1,0,0,0","param05":",0,0,1,1"}';
var json =eval( '(' + data + ')');
for(var key in json){
if ($('input[name=' + key + ']').attr('type') == 'radio') {
showRadioValue(key, json[key]);
}
if ($('input[name=' + key + ']').attr('type') == 'checkbox') {
showCheckBoxValue(key, json[key]);
}
}
function showRadioValue(name, value) {
$('input[name=' + name + ']').each(function () {
if(value == $(this).val()){
$(this).attr('checked', 'true');
}
});
}
function getRadioValue(name) {
var value = 0;
var i = 0;
$('input[name=' + name + ']' ).each(function () {
if ($('input[name=' + name + ']').eq(i).is( ':checked')) {
value = $('input[name=' + name + ']').eq(i).val();
return;
}
i++;
});
return value;
}
function showCheckBoxValue (name, value) {
var values = value.split(',' );
var row = 1;
$('input[name="' + name + '"]').each( function () {
if (values[row] == 1) {
$(this).attr("checked" , 'true');
}
row++;
});
}
function getCheckboxValue (name) {
var text = "" ;
$('input[name="' + name + '"]').each( function () {
var t = '' ;
if ($(this ).is(':checked')) {
t = "1";
} else {
t = "0";
}
text += "," + t;
});
return text;
}
function showResult() {
var model = {};
var radioName = '';
var checkboxName = '';
$("input[type='radio']").each(function () {
if($(this).attr('name') != radioName){
radioName = $(this).attr('name');
model[radioName] = getRadioValue(radioName);
}
});
$("input[type='checkbox']").each(function () {
if($(this).attr('name') != checkboxName){
checkboxName = $(this).attr('name');
model[checkboxName] = getCheckboxValue(checkboxName);
}
});
console.log(model);
}
</script>
</body>
</html>
Tips
- 如果有一些特殊處理的內容（如時間格式文本），可以先遍歷后在遍歷之后單獨進行賦值。
- 以上方法可以用于所有以ID定義的用于顯示和獲取數據的HTML元素。
- 用好jQuery的選擇器可以獲取到任何所需的元素、元素集合。
- 在each()方法中
$(this)表示當前元素。 - 獲取所選ID的元素標簽：
$('#' + key).prop('tagName') == 'SPAN'，注意：標簽結果'SPAN'都是大寫的,可以打log驗證。 - 不斷找規律、總結提煉，找出最好的偷懶方法，盡量避免體力勞動。
