알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)
[jQuery ] 폼 이벤트 본문
폼 이벤트
간단하게 폼이벤트에 대해서 다뤄 보겠습니다.
이벤트에 대한 좀더 상세한 내용은
- jQuery 폼 API 문서 : http://api.jquery.com/category/forms/
<!DOCTYPE html>
<html>
<head>
<style>
span {
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
<input type="text" />
<span></span>
</p>
<script>
$("input").focus( function () {
$(this).next("span").html('focus');
}).blur( function() {
$(this).next("span").html('blur');
}).change(function(e){
alert('change!! '+$(e.target).val());
}).select(function(){
$(this).next('span').html('select');
});
</script>
</body>
</html>
.focus input 태그에 포커스가 되었을때 발생 합니다.
.blur 포커스가 해제 될때 사용 됩니다 .
.change input 태그 값이 변경 될때 사용 됩니다.
- function(e) 함수에 e 라는 변수를 줬는데 이것은 현재 $("input") 와 같습니다.
- $(e.target) 은 $(this) 와 같습니다.
.select input 태그 안에 문자열이 선택 될때 발생 합니다.
$(this).next('span') 는 $("input") 의 옆에 태그중 span 인 것을 선택 합니다.
.submit
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin:0;
color:blue;
}
div, p {
margin-left:10px;
}
span {
color:red;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
Type 'correct' to validate.
</p>
<form action="javascript:alert('success!');">
<div>
<input type="text" />
<input type="submit" />
</div>
</form>
<span></span>
<script>
$("form").submit( function() {
if ($("input:first").val() == "correct") {
$("span").text("Validated...").show();
return true;
}
$("span").text("Not valid!").show().fadeOut(1000);
return false;
});
</script>
</body>
</html>
form의 type = "summit" 의 .summit 이벤트는 서버로 데이터를 보내는 순간에 발생합니다.
일반적으로 발생 시점은 입력 창에서 엔터를 누르거나 버튼을 눌러 을때 발생합니다.
$("input:first") 셀렉터(선택자)로 input type의 태그중 첫번째 태그를 선택합니다. (<input type="text" />)
$("input:first").val() == "correct" 그리고 해당 내용과 일치 하는지 알려 줍니다.
.show() 는 $("span").text("Validated...") 을 보여 줍니다.
return true; 로 하면 form action="javascript:alert('success!'); 에 정의한 대로 데이터를 action에 전송하고
리턴을 false로 하면 전송을 하지 않습니다.
fadeOut(1000); 은 잠시 보여주는 효과를 줍니다.
'Web > JQuery' 카테고리의 다른 글
| ajax+django(csrf) 통신하기 (0) | 2017.08.27 |
|---|---|
| [jQuery]애니메이션 (0) | 2017.08.25 |
| [jQuery]엘리먼트 제어 (0) | 2017.08.23 |
| [javascript,jQuery] 이벤트란? (0) | 2017.08.23 |
| [jQuery] Chain이란? (0) | 2017.08.23 |
