폼
- 서버로 데이터를 전송하기 위한 수단
- 생활코딩 HTML 튜토리얼 폼 편 참고
- Query는 폼을 제어하는데 필요한 이벤트와 메소드를 제공한다.
- jQuery 폼 API 문서 : http://api.jquery.com/category/forms/
예제1. (.focus(), .blur(), .change(), .select())
<!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>
예제2. (.submit(), .val())
<!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>
