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

serializeArray()

form 요소들(input, textarea, select)을 이름을 key로, 값을 value로 하는 배열로 인코딩합니다.

 

사용

HTML

<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

$( "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" }
]