hsunny study blog

[jQuery] serializeArray()를 이용해 form 값을 한번에 가져오기 본문

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(functionevent ) {
  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으로 인식합니다.