programming/javascript
[jQuery] serializeArray()를 이용해 form 값을 한번에 가져오기
헤써니
2019. 11. 29. 21:12
serializeArray()
form 요소들(input, textarea, select)을 이름을 key로, 값을 value로 하는 배열로 인코딩합니다.
사용
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<form>
<div><input type="text" name="a" value="1" id="a"></div>
<div><input type="text" name="b" value="2" id="b"></div>
<div><input type="hidden" name="c" value="3" id="c"></div>
<div>
<textarea name="d" rows="8" cols="40">4</textarea>
</div>
<div><select name="e">
<option value="5" selected="selected">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select></div>
<div>
<input type="checkbox" name="f" value="8" id="f">
</div>
<div>
<input type="submit" name="g" value="Submit" id="g">
</div>
</form>
|
jQuery
|
1
2
3
4
|
$( "form" ).submit(function( event ) {
console.log( $( this ).serializeArray() ); // A
event.preventDefault();
});
|
A에서 출력되는 내용은 아래와 같습니다.
|
[
{ name: "a", value: "1" },
{ name: "b", value: "2" },
{ name: "c", value: "3" },
{ name: "d", value: "4" },
{ name: "e", value: "5" }
]
|
- { name: "a", value: "1" } == <input type="text" name="a" value="1" id="a">
- { name: "c", value: "3" } == <input type="hidden" name="c" value="3" id="c">
- { name: "d", value: "4" } == <textarea name="d" rows="8" cols="40">4</textarea>
- { name: "e", value: "5" } == <select name="e"> 내의 selected 값 <option value="5" selected="selected">5</option>
특이사항
- name attribute의 값이 반드시 있어야 합니다.
- value 값이 없는 element는 value가 빈(empty)스트링의 형태로 할당됩니다.
- type이 submit 인 경우는 value가 있어도 (serialized) 대상에 해당되지 않습니다.
- name이 배열인 경우 ex. <input name='fruits[]'.../> ,'fruits[]' 자체를 string으로 인식합니다.