mrkjm@nate.comjQuery form 처리하는 방법 .submit() event
머니버그
0
744
2020.12.29 16:07
웹 상에서 사용자에게 입력을 받기 위해 form을 사용합니다.
제이쿼리에는 폼을 처리하는 몇 가지 이벤트가 있는데, 그 중 .submit()에 대해 알아보겠습니다.
폼 양식 내 정보 출력
셀렉터로 사용자가 폼에서 입력한 정보를 가져와 원하는 위치를 지정해 다시 출력해 주는 코드를 작성해 보았습니다.
1 2 3 4 5 6 7 8 9 | $(document).ready(function(){ $("#myForm").submit(function(){ var name = $("#name").val(); $("#inputData").append('<p>' + '이름: '+ name + '</p>'); var email = $("#email").val(); $("#inputData").append('<p>' + '이메일: ' + email + '</p>'); return false; }); // end submit() }); // end ready() | cs |
먼저 하단의 html 문서를 받아오기 위해 $(document).ready() funtion의 Dom 구조로 시작 합니다.
.submit()function으로 서브밋 이벤트를 실행시킵니다.
이때 함수명이 지정되지 않은 익명함수를 사용하였습니다.
.val()은 폼의 value를 읽어오거나 지정할 수 있습니다.
name과 email을 각각 셀렉터로 연결한 뒤, .append()로 특정 영역에 삽입해 줍니다.
1 2 3 4 5 6 | <form id="myForm"> 이 름 : <input type="text" id='name' name="name"><p> 이메일 : <input type="email" id='email' name="email"><p> <input type="submit" value="전송"> </form> <div id="inputData"></div> | cs |
폼 유효성 검사
사용자가 username을 입력했을 때 빈칸인지 아닌지 검증해 알림을 띄우는 코드를 작성해 보았습니다.
1 2 3 4 5 6 7 8 | $(document).ready(function() { $('#signup').submit(function() { if ($('#username').val() == '') { alert('Please supply a name in the Name field.'); return false; } }); // end submit() }); // end ready() | cs |
마찬가지로 Dom과 서브밋으로 시작합니다.
if문으로 empty string('')이 있는지 체크하여, 있다면 alert로 박스알림을 띄워 줍니다.
return false; 는 username이 비어있는 상태로 서버로 전송되는 것을 방지하기 위해 반드시 넣어줍니다.
1 2 3 4 5 6 7 8 9 | <form action="process.php" method="post" name="signup" id="signup"> <div> <label for="username" class="label">Name</label> <input name="username" type="text" id="username" size="36"> </div> <div> <input type="submit" name="submit" id="submit" value="Submit"> </div> </form> | cs |
JQuery, Event, form, Javascript, Selector, submit, 셀렉터, 이벤트, 제이쿼리
