serialize()
폼(form) 요소 name 값(value)를
문자열로 변환(encoding) 하는 함수
: 데이터를 보내기 위해 jsp 에 form 요소를 문자열로 코딩 해주는 스크립트 함수 이다.
.serialize() 함수는 표준 URL_encode 표기법으로 텍스트 문자열을 만든다.
<form id="testForm" name="testForm"> <input type="text" name="pageIndex" id="pageIndex" value="1" /> <input type="text" name="searchKeyword" id="searchKeyword" value="2" /> <input type="text" name="pkList" id="pkList1" value="no1" /> <input type="text" name="pkList" id="pkList2" value="no2" /> <input type="text" name="pkList" id="pkList3" value="no3" /> <button type="button" name="btn" id="btn" value="test" class="btnChk">확인</button> </form> <script> var $form = $("#testForm"); $form.find(".btnChk").on('click', function(e){ console.log($form.serialize()); alert($form.serialize()); }); </script> |
위 소스를 실행해서 [확인] 버튼을 누르면 콘솔 로그와 alert 창으로 $form.serialize() 된 문자열을 확인해 볼수 있다.
그 값은 다음과 같다.
pageIndex=1&searchKeyword=1&pkList=no1&pkList=no2&pkList=no3 |
여기서 조금 이상함을 느낄것이다
serialize() 는 name 의 이름과 값을 조합하여 문자열을 만든다는 점이다.
그렇다면 마지막 button 태크의 값이 안보인다?
누구에게는 당연한 이야기 일수 있으나 잠시 설명 하도록 한다.
button 태그는 값은 value 를 사용 한다고 해도 값이 넣어지는 태그는 아니다. (value 값이 없는 태그이다)
만일 button 태그를 input으로 변경 했다고 했을때 값이 넣어지는 것은 아니다.
<button type="button" name="btn" id="btn" value="test" class="btnChk">확인</button> 변경 ==> <input type="button" name="btn" id="btn" value="test" class="btnChk" value="확인" /> |
input button type에서 value 는 버튼 위에 보이는 텍스트 이름을 표시 할 뿐이다.
Chk : 폼요소는 반드시 name 속성이 있어야 한다.
checkboxes 와 radio button 은 선택 된것만 포함 된다.
file,button 속성은 포함 되지 않는다. (radio 예외)
'경험치바(Experience Opint Bar)' 카테고리의 다른 글
| SVN 체크아웃(Checkout) 프로젝트 Maven 설정 (0) | 2018.07.05 |
|---|---|
| serialize() 이용 간단히 form 값을 서버로 넘기는 방법 (ajax 사용) (0) | 2018.07.04 |
| 체크박스 체크된 값만 가져오기 (2) | 2018.07.03 |
| 쇼핑몰 운영 - 내시간 벌기 (Life time up) 최소 비용,시간 투자 [정보] (0) | 2018.06.30 |
| jQuery closest(), parents() 메소드의 차이 (0) | 2018.06.29 |