jQuery - 폼 지원 메소드

Programming/JQuery 2012. 4. 27. 14:06

[ .submit( handler(eventObject)) ]

Submit이 일어날 때 (서식이 전송될 때) 발생하는 이벤트

.submit( handler(eventObject) )
  handler(eventObject) 이벤트가 발생하면 실행될 기능.
.submit( [eventData], handler(eventObject) )
  eventData 이벤트 핸들러에 전달될 데이터 맵.
  handler(eventObject) ) 이벤트가 발생하면 실행될 기능.
.submit()

.submit(handler(eventObject) 를 살펴 보면, 뒤에 handler라는 것이 존재를 하고 있다. .submit()을 호출하게 되면 정의된 handler를 실행하고 리턴 받은 Boolean값을 통해 서버로 데이터 전송 유/무를 결정 하게 된다.

일반적인 submit() 사용

function sendSubmit() {
    if (document.getElementById("txtName").value == '') {
        alert("이름을 입력하세요.");
        return;
    }
    else {  document.form.submit();   }
}

 jQuery에서 제공하는 .submit(handler);를 사용

$('form').submit(function() {
    if($('#txtName').val() == '') {
        alert("이름을 입력하세요.");
        return false;
    }
    else    {
        return true;
    }
});

 

[ .submit() 사용 예제 ]

<html xmlns="http://www.w3.org/1999/xhtml">
<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() 사용 예제 ]

<html xmlns="http://www.w3.org/1999/xhtml">
<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.27
jQuery - 스타일 관련 메소드  (0) 2012.04.26
jQuery Event - Browser Events  (0) 2012.04.26
jQuery Event - .one() & .live() & .die()  (0) 2012.04.24
Trackbacks 0 : Comments 0

Write a comment