반응형
jqeury reset 초기화 버튼 이벤트 구현
이번 포스팅에서는 jQuery를 활용하여 간단하게 초기화 버튼을 구현해 보도록 하겠습니다.
#id selector 를 사용해 btn_reset 버튼을 클릭했을 때 폼의 값을 초기화하는
함수를 만들어 처리합니다.
[코딩부]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
<body>
<form id=reset_test_form>
메일주소 <input type="text" id ="mail"/><br>
전화번호 <input type="text" id="tel"/>
</form>
<input type="button" id="btn_reset" value=" Reset "></button>
<script>
$(document).ready(function(){
//btn_reset 을 클릭했을때의 함수
$( "#btn_reset").click(function () {
$( "#reset_test_form" ).each( function () {
this.reset();
});
});
});
</script>
</body> |
cs |
[설명부]
jQuery id Selector 를 사용해 btn_reset 버튼을 클릭하면
reset_test_form 의 값 reset.
[사용된 jQuery 정리]
click()
대상 element 에 click event 가 발생했을 때 callback function 을 실행한다.
each()
document 에서 대상이 되는 element들에 대해서 callback function을 실행한다. (반복)
reset()
form에 있는 element 의 value 를 초기화 한다.
반응형
'Programing > jQuery' 카테고리의 다른 글
| jquery 동적으로 생성된 DOM 개체에 대한 이벤트 처리 (0) | 2014.09.02 |
|---|---|
| jQuery focus 포커스 처리 (0) | 2014.04.22 |
| jQuery Selector 셀렉터 사용법 (1) | 2014.04.17 |
| jQuery each 에 대해 알아보자. 제이쿼리 반복문 jQuery for while (0) | 2014.04.17 |
| jQuery 전체선택 해제 체크박스 이벤트 구현 방법 (0) | 2014.04.14 |
댓글