폼
- 서버로 데이터를 전송하기 위한 수단
- 생활코딩 HTML 튜토리얼 폼 편 참고
- Query는 폼을 제어하는데 필요한 이벤트와 메소드를 제공한다.
- jQuery 폼 API 문서 : http://api.jquery.com/category/forms/
예제1. (.focus(), .blur(), .change(), .select())
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html><html> <head> <style> span { } </style> </head> <body> <p> <input type="text" /> <span></span> </p> <script> $("input").focus( function () { $(this).next("span").html('focus'); }).blur( function() { $(this).next("span").html('blur'); }).change(function(e){ alert('change!! '+$(e.target).val()); }).select(function(){ $(this).next('span').html('select'); }); </script> </body></html> |
예제2. (.submit(), .val())
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html><html> <head> <style> p { margin:0; color:blue; } div, p { margin-left:10px; } span { color:red; } </style> </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> |
