submit
원문 링크 
http://api.jquery.com/submit/
개요 : "submit" JavaScript 이벤트를 바인딩 하거나 요소에 발생시킵니다.
- .submit( handler(eventObject) )
- handler(eventObject) 이벤트가 발생하면 실행될 기능.
- .submit( [eventData], handler(eventObject) )
- eventData 이벤트 핸들러에 전달될 데이터 맵.
- handler(eventObject) ) 이벤트가 발생하면 실행될 기능.
- .submit()
이 함수의 첫번째, 두번째 용법은 .bind('submit', handler) 를 줄여 표현한 것이고 세번째 용법은 .trigger('submit') 를 줄여 표현한 것입니다.
submit 이벤트는 유저가 폼 전송(form submit)을 시도할 때 발생합니다. 이 이벤트는 오로지 <form> 요소에만 바인딩할 수 있습니다. 폼(Form)은 <input type="submit">, <input type="image">, <button type="submit"> 들을 클릭하거나 폼의 어떤 요소에서 Enter 키를 눌러서 전송할 수 있습니다.
아래 HTML 을 예로 보겠습니다.
<form id="target" action="destination.html"> <input type="text" value="Hello there" /> <input type="submit" value="Go" /> </form> <div id="other"> Trigger the handler </div>
form 에 이벤트 핸들러를 바인딩 할 수 있습니다.
scroll 이벤트 핸들러는 아래처럼 요소에도 바인딩할 수 있습니다.
$('#target').submit(function() {
alert('Handler for .submit() called.');
return false;
});
Go를 클릭하면 알림창이 나타납니다. 하지만 실제로 전송이 되기전에 취소됩니다. 스크립트에서 false를 반환했기 때문에 이벤트 객체에서 .preventDefault() 함수를 호출하여 sumbit 액션을 취소시키고 있기 때문입니다.
일반적인 사용법을 위한 예제입니다. 바인딩하는 방법에 대해서만 눈여겨 보심 될거 같네요.
수동으로 submit 이벤트를 발생시켜 보겠습니다.
$('#other').click(function() {
$('#target').submit();
});이 코드가 실행되면 Trigger the handler 영역을 클릭해도 알림창이 나타나게 됩니다.
추가 사항 ( Additional Notes )
폼과 그 하위 요소들의 name 또는 id 값으로 code>submit, length, method 와 같은 것을 사용하지 않아야 합니다. Name 을 이런 것으로 사용하면 문제가 발생할 수 있습니다. 마크업을 작성하실 때 발생하는 문제에 대해서 더 궁금하시면 http://kangax.github.com/domlint/ 를 참조하십시요..
예 제
전송할 수 있는 조건을 체크하여 전송 여부 판단하기
<!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>미리보기
이 예제는 'correct'라고 적고 클릭해야 submit이 일어나는 것입니다..
예 제
return 할 부울(bool) 값으로 submit을 제어할 수 있습니다.
$("form").submit( function () {
return this.some_flag_variable;
} );
예 제
페이지에 있는 첫번째 form을 전송(submit) 합니다.
$("form:first").submit();
submit은 웹의 핵심이죠. 언제나 정보의 흐름에 주된 이벤트입니다. 아주 중요한 이벤트이니 잘 새겨서 활용하시기 바랍니다.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| unbind(), 바인딩 해제하기 (0) | 2012.03.20 |
|---|---|
| triggerHandler(), 하나의 함수만 실행시키기 (0) | 2012.03.20 |
| trigger(), 함수 실행시키기 (0) | 2012.03.20 |
| toggle(), 토글하기 (0) | 2012.03.09 |
| select(), 텍스트 드래그 이벤트 (2) | 2012.03.09 |
| scroll(), 스크롤 이벤트 (3) | 2012.03.06 |
| resize(), 사이즈 바꾸기 (0) | 2012.03.06 |
| ready(), 문서가 준비되면 실행하기 (0) | 2012.03.06 |