แจกฟรีๆ.. JavaScript:setFormValue() กำหนดค่าได้ไม่ว่า input แบบไหน

Posted By:   Published in All Categories, HTML/JavaScript/CSS

11

Oct 09

บางคนอาจจะเคยประสบปัญหาเวลาที่จะต้องทำการกำหนดค่าให้กับ input ต่างๆ ใน html form โดยเฉพาะอย่างยิ่งพวก radio button, select, checkbox ซึ่งหากว่ามีไม่กี่ตัวก็คงไม่ลำบากเท่าไร แต่หากว่ามีเยอะหละก็ความยุงยากก็จะตามมา

ดูตัวอย่างก่อน ได้ที่นี้เลย https://www.unzeen.com/example/setFormValue.html

ต่อไปมาเริ่มดู code ทั้งหมดกันต่อเลยดีกว่า

# setFormValue.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<title>JavaScript:setFormValue()</title>
</head>
 
<body>
 
<hr>
<form name="form1" method="post" action="">
  <input name="text" type="text" id="text">
  <br>
  <input name="hiddenField" type="hidden" value="">
  <br>
  <textarea name="textfield"></textarea>
  <br>
  <select name="multi_select" size="5" multiple>
    <option value="aa">aa</option>
    <option value="bb">bb</option>
    <option value="cc">cc</option>
    <option value="dd">dd</option>
    <option value="ee">ee</option>
  </select>
  <br>
  <input name="checkbox1" type="checkbox" id="checkbox1" value="1">
  <input name="checkbox2" type="checkbox" id="checkbox2" value="1">
  <input name="checkbox3" type="checkbox" id="checkbox3" value="1">
  <br>
  <input name="radiobutton" type="radio" value="1">
  <input name="radiobutton" type="radio" value="2">
  <input name="radiobutton" type="radio" value="3">
  <input name="radiobutton" type="radio" value="4">
  <br>
  <select name="select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</form>
<hr>
 
 
<script type="text/javascript" language="javascript">
 
function setFormValue(objName,strValue){
	var arrObj = document.getElementsByName(objName);
	for(i=0;i<arrObj.length;i++){
		arrObjCheck = arrObj[i];
		if(arrObjCheck.type == "text" || arrObjCheck.type == "textarea" || arrObjCheck.type == "hidden"){ arrObjCheck.value = strValue;}
		if(arrObjCheck.type == "select-one") for(j=0;j<arrObjCheck.length;j++){ if(arrObjCheck.options[j].value == strValue){ arrObjCheck.options[j].selected = true;}else if(arrObjCheck.options[j].text == strValue){arrObjCheck.options[j].selected = true;}}
		if(arrObjCheck.type == "select-multiple") for(j=0;j<arrObjCheck.length;j++){ if(strValue.indexOf("|"+arrObjCheck.options[j].value+"|")  > -1){ arrObjCheck.options[j].selected = true;}else if(strValue.indexOf("|"+arrObjCheck.options[j].text+"|")  > -1){arrObjCheck.options[j].selected = true;}}
		if(arrObjCheck.type == "radio") if(arrObjCheck.value == strValue){ arrObjCheck.checked = true;}
		if(arrObjCheck.type == "checkbox") if(arrObjCheck.value == strValue){ arrObjCheck.checked = true;}
	}
}
 
setFormValue('text','Test Test Test');
setFormValue('select','3');
setFormValue('radiobutton','3');
setFormValue('checkbox1','1');
setFormValue('checkbox3','1');
setFormValue('hiddenField','Hidden Hidden Hidden');
setFormValue('textfield',' Line1 \n Line2 \n Line3 ');
setFormValue('multi_select','|bb|ee|');
 
</script>
 
 
</body>
</html>

จากตัวอย่างจะเห็นว่ามี function setFormValue ซึ่ง function นี้จะทำการค้นหา input ที่มีชื่อตรงกับ ตัวแปร objName และทำการกำหนดค่าที่อยู่ในตัวแปร strValue ให้กับ input ตัวนั้นๆ ฟังดูง่ายๆ อธิบายเท่านี้ ^_^

Related articles

No Responsed To This Post
LookHin
Mr.Khwanchai Kaewyos (LookHin)
Mobile : 088-799-8421
Name : LookHin
E-mail : [email protected]

https://github.com/LookHin
https://www.facebook.com/LookHin
https://twitter.com/LookHin