Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- border-width
- typescript
- oh-my-zsh
- IONIC3
- code .
- Sentry
- angular
- fromEvent
- sealize
- Git
- VSCode
- 이미지바꾸기
- zsh
- php
- 자바스크립개념
- aab 배포
- angular5
- Ionic
- 테두리굵기
- getElementsByClassName
- change detection
- NVM
- ion-range
- ChangeDetectorRef
- Visual Studio Code
- error
- hashchange
- JavaScript
- 변화감지
- rxjs
Archives
- Today
- Total
hsunny study blog
[jQuery] serializeArray()를 이용해 form 값을 한번에 가져오기 본문
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으로 인식합니다.
'programming > javascript' 카테고리의 다른 글
자바스크립트에서 거짓으로 취급하는 값 (0) | 2021.04.01 |
---|---|
논리 연산자 (0) | 2020.09.14 |
new Array() vs [] (0) | 2019.11.27 |
제곱근 구하기 (0) | 2019.11.25 |
[jQuery] serialize()를 이용해 form 값을 한번에 가져오기 (0) | 2019.10.05 |