Form

2023. 7. 28. 15:48ใ†jquery

Form?

์„œ๋ฒ„๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†กํ•˜๊ธฐ ์œ„ํ•œ ์ˆ˜๋‹จ

Query๋Š” ํผ์„ ์ œ์–ดํ•˜๋Š”๋ฐ ํ•„์š”ํ•œ ์ด๋ฒคํŠธ์™€ ๋ฉ”์†Œ๋“œ๋ฅผ ์ œ๊ณต

 

ex1)

.focus() : ์ฃผ๋ชฉ ๋ฐ›์œผ๋ฉด 

.blur() : ํฌ์ปค์Šค์™€ ๋ฐ˜๋Œ€์˜ ๊ฐœ๋…

.change() : ์…€๋ ‰ํ„ฐ๋ฅผ ์ •ํ•˜์—ฌ ํ•ด๋‹น ์…€๋ ‰ํ„ฐ์˜ ๊ฐ’์ด ๋ณ€ํ•  ๊ฒฝ์šฐ ๋ณ€ํ™”๋ฅผ ์บ์น˜

.select() : ์–ด๋–ค ํŠน์ •ํ•œ  text ํ•„๋“œ ์•ˆ์—์„œ ์–ด๋–ค ๋ฐ์ดํ„ฐ๊ฐ€ ์„ ํƒ(๋“œ๋ž˜๊ทธ) ๋์„ ๋•Œ

 

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
    </head>
    <body>
    
       <p>
            <input type="text" />
            <span></span>
        </p>
        
        <script>
        //์˜ˆ์ œ1 .focus(), .blur(), .change(), .select() 
            $("input").focus(function(){
            			//๋ž˜ํผ์˜ ๋‹ค์Œ ์—˜๋ฆฌ๋จผํŠธ ์ฐพ์Œ
                $(this).next("span").html('focus');
               //chain > .์œผ๋กœ ๋ž˜ํผ ์œ ์ง€ํ•˜์—ฌ ์ด๋ฒคํŠธ ๊ณ„์† ๋ฐœ์ƒ
            }).blur( function() {
                $(this).next("span").html('blur');
              //chain > .์œผ๋กœ ๋ž˜ํผ ์œ ์ง€ํ•˜์—ฌ ์ด๋ฒคํŠธ ๊ณ„์† ๋ฐœ์ƒ
            }).change(function(e){
            		//ํƒ€๊ฒŸ์€ value ๊ฐ’ ๊ฐ™์ด ๋„์›€ (์ด๋ฒคํŠธ๊ฐ€ ํ˜ธ์ถœ๋  ๋•Œ ์ด๋ฒคํŠธ ์˜ค๋ธŒ์ ํŠธ๊ฐ€ ์ „๋‹ฌ ๋จ. > ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•œ ์—˜๋ฆฌ๋จผํŠธ ๋ฆฌํ„ด)
                alert('change!! '+$(e.target).val());
              //chain > .์œผ๋กœ ๋ž˜ํผ ์œ ์ง€ํ•˜์—ฌ ์ด๋ฒคํŠธ ๊ณ„์† ๋ฐœ์ƒ    
           		}).select(function(){
                	$(this).next('span').html('select');
            });
            
        </script>
    </body>
</html>

 

focus ์ด๋ฒคํŠธ : input ํƒœ๊ทธ ํด๋ฆญ ์‹œ input ํƒœ๊ทธ ๋‹ค์Œ ํƒœ๊ทธ focus html ์ถ”๊ฐ€

blur ์ด๋ฒคํŠธ :  input ํƒœ๊ทธ ํฌ์ปค์Šค ํ•ด์ œ ์‹œ input ํƒœ๊ทธ ๋‹ค์Œ ํƒœ๊ทธ blur html ์ถ”๊ฐ€

change ์ด๋ฒคํŠธ : ๋น„์–ด ์žˆ๋˜ input ํƒœ๊ทธ์— text ์ž…๋ ฅ (๋ณ€ํ™” ์žˆ์„ ์‹œ) alert์ฐฝ ๋„์šฐ๊ธฐ

select ์ด๋ฒคํŠธ : input ํƒœ๊ทธ text ์„ ํƒ(๋“œ๋ž˜๊ทธ) ์‹œ select html ์ถ”๊ฐ€

 

 

ex2)

.submit()์„ ์ด์šฉํ•˜์—ฌ ํผ ์ „์†ก์„ ์ œ์–ด

<!DOCTYPE html>
<html>
    <head>
        <style>
        
            p {
                margin:0;
                color:blue;
            }
            div, p {
                margin-left:10px;
            }
            span {
                color:red;
            }
            
        </style>
        <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.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>
        //์˜ˆ์ œ2 .submit(), .val()
           $("form").submit( function() {
                if ($("input:first").val() == "correct") {
                				//.show() : element๊ฐ€ ๊ฐ์ถฐ์ ธ์žˆ์„ ๋•Œ ํ‘œ์‹œ ๋˜๊ฒŒ
                    $("span").text("Validated...").show();
                	//์ด๋ฒคํŠธ ์‹คํ–‰ ํ›„ submit ์ •์ƒ ์ž‘๋™
                    return true;
                }
                				//์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ
                $("span").text("Not valid!").show().fadeOut(1000);
                //์ด๋ฒคํŠธ ์‹คํ–‰ ํ›„ submit ์ž‘๋™ X
                return false;
            });
        
            
        </script>
    </body>
</html>

submit ์ด๋ฒคํŠธ

correct ์ •์ƒ ์ž…๋ ฅ ์‹œ submit ์ด๋ฒคํŠธ true ๋ฆฌํ„ด > form ํƒœ๊ทธ์˜ action์œผ๋กœ ๊ฐ’ ์ „๋‹ฌ ํ›„ alert์ฐฝ ๋„์›€

์œ„์˜ ๊ฒฝ์šฐ๊ฐ€ ์•„๋‹ ๋•Œ๋Š” submit ์ด๋ฒคํŠธ false ๋ฆฌํ„ด > ์ด๋ฒคํŠธ ์ž‘๋™ X

์ €์ž‘์žํ‘œ์‹œ (์ƒˆ์ฐฝ์—ด๋ฆผ)

'jquery' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

animation  (0) 2023.07.28
traversing(ํƒ์ƒ‰)  (0) 2023.07.28
Mainpulation(์—˜๋ฆฌ๋จผํŠธ ์ œ์–ด)  (0) 2023.07.28
event  (0) 2023.07.28
Chain  (0) 2023.07.27

๊ด€๋ จ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”