jQuery / Method / .submit() - 폼 전송 이벤트
.submit()을 이용하여 폼 전송을 제어할 수 있다. 다음은 이를 활용한 몇 가지 예제이다.
목차
select 선택 시 바로 폼 전송
select에서 값을 선택하면 바로 전송을 한다. 동적(다단계) 셀렉트 박스 만들 때 유용하다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( '#jb-fruit' ).change( function() { $( '#jb-form' ).submit(); } ); } ); </script> <style> * { font-family: Consolas; } </style> </head> <body> <form method="POST" id="jb-form"> <select name="fruit" id="jb-fruit" required> <option value=""></option> <option value="apple">Apple</option> <option value="banana">Banana</option> </select> </form> <p><?php echo $_POST[ 'fruit' ] ?></p> </body> </html>
전송 버튼이 아닌 요소를 클릭 시 폼 전송
form 외부의 요소를 클릭해도 폼을 전송하게 할 수 있다. 단, 이때 required는 작동하지 않는다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( '#jb-submit' ).click( function() { $( '#jb-form' ).submit(); } ); } ); </script> <style> * { font-family: Consolas; } </style> </head> <body> <form method="POST" id="jb-form"> <select name="fruit" id="jb-fruit" required> <option value=""></option> <option value="apple">Apple</option> <option value="banana">Banana</option> </select> </form> <p id="jb-submit">Submit</p> <p><?php echo $_POST[ 'fruit' ] ?></p> </body> </html>
폼 전송 전에 특정 작업 수행
폼을 전송하기 전에 특정 작업을 할 수 있다. 다음은 선택한 값을 알려주는 예이다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( '#jb-form' ).submit( function() { alert( 'You selectd ' + $( '#jb-fruit' ).val() + '!' ); } ); } ); </script> <style> * { font-family: Consolas; } </style> </head> <body> <form method="POST" id="jb-form"> <select name="fruit" id="jb-fruit" required> <option value=""></option> <option value="apple">Apple</option> <option value="banana">Banana</option> </select> <input type="submit" value="submit"> </form> </body> </html>
유효성 검사
입력 또는 선택한 값이 유효한지 검사하는 게 사용할 수 있다. 다음은 select에서 빈 값을 선택했을 때 창을 띄우고, 전송을 하지 않는다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( '#jb-form' ).submit( function( event ) { if ( $( '#jb-fruit' ).val() == '' ) { alert( 'Select!' ); event.preventDefault(); } } ); } ); </script> <style> * { font-family: Consolas; } </style> </head> <body> <form method="POST" id="jb-form"> <select name="fruit" id="jb-fruit"> <option value=""></option> <option value="apple">Apple</option> <option value="banana">Banana</option> </select> <input type="submit" value="submit"> </form> </body> </html>