JQuery 폼

폼

서버로 데이터를 전송하기 위한 수단
JQuery는 폼을 제어하는데 필요한 이벤트와 메소드를 제공한다.
JQuery 폼 API 문서 : http://api.jquery.com/category/forms/

Forms | jQuery API Documentation

Bind an event handler to the “blur” JavaScript event, or trigger that event on an element. Bind an event handler to the “change” JavaScript event, or trigger that event on an element. Bind an event handler to the “focus” JavaScript event, or tr

api.jquery.com

예제

.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 () { //input태그 wrapping후 클릭하여 포커싱 당하면 함수실행
                $(this).next("span").html('focus');//포커싱 당할때 span 태그 옆에 html 문자 focus 찍힘
            }).blur( function() {// 포커싱에서 나갔을때 블러 상황일때 함수 실행
                $(this).next("span").html('blur');// 마찬가지로 문자 blur 찍힘
            }).change(function(e){// input태그의 값이 변화되면 함수 실행
                alert('오류 '+$(e.target).val());//.val 메소드를 이용하여 입력한 값 alert에 호출해줌
            }).select(function(){//select는 문자를 파란색으로 쭉 선택했을때 함수 실행
                $(this).next('span').html('select');//마찬가지로 문자 select 등장
            });
        </script>
    </body>
</html>

.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>
            당신은 남자입니까? 맞으면 '예'을 적으시오.
        </p>
        <form action="javascript:alert('success!');">// 스크립트에서 return된 true 값을 받아와 반응
            <div>
                <input type="text" />
 
                <input type="submit" />
            </div>
        </form>
        <span></span>
        <script>
            $("form").submit( function() {// 폼 태그 전체 wrapping 함, 전송버튼 누르면 함수 실행.
                if ($("input:first").val() == "예") {
                // 입력된 값이 '예' 문자 값과 일치하면 설정한 if문 실행
                    $("span").text("인정...").show();
                    return true;
                }
                $("span").text("거짓말").show().fadeOut(1000);
                return false;
                // 일치하지 않으면 위의 설정 실행
            });
        </script>
    </body>
</html>