[ .submit( handler(eventObject)) ]
Submit이 일어날 때 (서식이 전송될 때) 발생하는 이벤트
handler(eventObject) 이벤트가 발생하면 실행될 기능.
.submit( [eventData], handler(eventObject) )
eventData 이벤트 핸들러에 전달될 데이터 맵.
handler(eventObject) ) 이벤트가 발생하면 실행될 기능.
.submit()
.submit(handler(eventObject) 를 살펴 보면, 뒤에 handler라는 것이 존재를 하고 있다. .submit()을 호출하게 되면 정의된 handler를 실행하고 리턴 받은 Boolean값을 통해 서버로 데이터 전송 유/무를 결정 하게 된다.
일반적인 submit() 사용
if (document.getElementById("txtName").value == '') {
alert("이름을 입력하세요.");
return;
}
else { document.form.submit(); }
}
jQuery에서 제공하는 .submit(handler);를 사용
if($('#txtName').val() == '') {
alert("이름을 입력하세요.");
return false;
}
else {
return true;
}
});
[ .submit() 사용 예제 ]
<head>
<title>jQuery</title>
<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>
<script type="text/javascript">
$(document).ready(function () {
$("form").submit(function() {
if ($("input:first").val() == "correct") {
$("span").text("Validated...").show();
return true;
}
$("span").text("Not valid!").show().fadeOut(1000);
return false;
});
});
</script>
</head>
<body style="padding:10px;">
<p>Type 'correct' to validate.</p>
<form action="javascript:alert('success!');">
<div>
<input type="text" />
<input type="submit" />
</div>
</form>
<span></span>
</body>
</html>
위의 예제에서 살펴보면 입력된 값이 "correct"인지 확인 후 결과가 동일하면 Validated라는 메시지와 함께 경고창을 보여주고, 동일하지 않으면 return false를 통해 Not Valid라는 메시지를 보여준 후 별 다른 동작을 취하지 않는다.
[ .serialize() & .serializeArray() ]
특히나 Ajax를 이용한 비동기 통신에서는 데이터의 직렬화를 상당히 많이 사용하고 있다.
이럴 때를 사용하기 위하여 jQuery에서 제공하는는 form 데이터를 쉽게 직렬화 시킬 수 있는 메소드 들이다.
두 메소드의 역할은 동일하나, 반환되는 값에서 약간의 차이를 보인다.
.serialize()의 경우 선택한 폼의 값을 “a=1&b=2&c=3”등의 형태로 반환하며, .serializeArray() 메서드의 경우 jQuery 배열 개체로 반환한다.
[ .serialize() 사용 예제 ]
<head>
<title>jQuery</title>
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
<style>
div,pre { background : #FFF; padding:10px; margin:10px; }
table { border:1px solid #AAA; }
td { border:1px solid #AAA; width:25px; height:25px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('form').submit(function () {
var datas = $(this).serialize();
alert(datas);
return false;
});
});
</script>
</head>
<body style="padding:10px;">
<div>
<form>
<input type="text" name="a" id="a" /><br />
<input type="text" name="b" id="b" /><br />
<input type="hidden" name="c" id="c" value="3" /><br />
<select name="d">
<option value="5" selected="selected">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select><br />
<input type="submit" name="f" value="Submit" id="f" />
</form>
</div>
</body>
</html>
입력한 데이터가 직렬화되어 전송됨을 확인 할 수 있다.
원본 : http://www.sqler.com/387921, http://findfun.tistory.com/entry/submit-폼-전송-이벤트
'Programming > JQuery' 카테고리의 다른 글
| div 숨기기 / 보이기 (jQeury 버전) (0) | 2012.11.20 |
|---|---|
| jQuery checkbox 컨트롤 (0) | 2012.11.20 |
| jQuery - 스타일 관련 메소드 (0) | 2012.04.26 |
| jQuery Event - Browser Events (0) | 2012.04.26 |
| jQuery Event - .one() & .live() & .die() (0) | 2012.04.24 |
