오늘 onsubmit이라는 것에 대해 처음 접해봤다. 이전까지 view보다는 java단에 치중했기 때문이다. 데이터를 보다 더 원활하게 주고받기 위해 front 공부를 더 열심히 해야한다!
오늘의 주제는 복붙한 코드에서 아무리 submit을 눌러도 전송이 되지 않아 삽질을 4시간 한 후 작성하게 되었다. onclick이나 onchange의 존재에 대해서는 알고 있었지만, 왜 onsubmit 속성은 몰랐는지,,, 반성하자
<form> 태그에서는 onsubmit을 통해 submit을 제어할 수 있다.
그래서 대개 form 전송 직전에 form 태그 안의 데이터의 유효성을 검사하기 위해 사용한다.
<body>
<form id="myForm" onsubmit="checkNull()" action="success.jsp">
<input type="text" id="myId"><br/>
<input type="text" id="myPw">
<input type="submit" value="sign in">
</form>
</body>
<script>
function checkNull(){
var idValue = $('#myId').val();
var pWValue = $('#myPw').val();
if(idValue == null || idValue ==''){
alert("id를 입력하세요.");
return false;
}
if(pWValue == null || pWValue ==''){
alert("pw를 입력하세요.");
return false;
}
}
</script>
위의 코드는 내가 임시로 작성해 본 코드이다.
잘 보면 자바스크립트 부분에서 false를 리턴하고 있는 것을 볼 수 있다.
onsubmit="func()" 에서 func()는 반드시 true와 false를 리턴하도록 만들어줘야 한다.
true나 false를 반환해 주지 않는다면, 값이 어떻든 간에 그냥 action에 지정된 값으로 넘어가기 때문이다. 위의 코드에서, 자바스크립트 내 리턴문인 return false;를 지운 상태로 실행해 본 아래의 예시를 보자!!!
<body>
<form id="myForm" onsubmit="checkNull()" action="success.jsp">
<input type="text" id="myId"><br/>
<input type="text" id="myPw">
<input type="submit" value="sign in">
</form>
</body>
<script>
function checkNull(){
var idValue = $('#myId').val();
var pWValue = $('#myPw').val();
if(idValue == null || idValue ==''){
alert("id를 입력하세요.");
//return false;
}
if(pWValue == null || pWValue ==''){
alert("pw를 입력하세요.");
//return false;
}
}
</script>
따라서, onsubmit이라는 속성을 사용하는 이유에 대해 다시 한번 생각해본다면(유효성 검사말이다!) 결과값을 리턴해주도록 함수를 구성하는 것이 사용 목적에 부합한다고 볼 수 있다.
true를 반환한다면 form이 성공적으로 전송된다. false를 반환하면 form이 전송되지 않는다.
false를 반환하면 전송도 안될 뿐더러(이벤트 강제 종료), form 안에 작성된 내용이 초기화된다. 따라서 여러 데이터에 대해서 유효성 검사는 따로 자바스크립트를 짜서 하는게 좋을 것 같다는 생각을 했다. 한 두개 정도의 데이터는 지워져도 다시 작성하면 그만이지만, 만약 내가 뭔가를 기입하지 않고 submit 버튼을 눌러버렸고 유효성 검사에 통과하지 못해 form에 작성한 데이터가 다 날아간다면... 분명 그 웹사이트에 가입할 마음이 싹 사라질 거다.
절대 submit 되지 않도록 막아두는 방법도 있다.
바로 onsubmit="return false;" 이다.
아예 못보낸다고 못박아 두는 거다.
추가로 볼 만한 링크
- html 이벤트 리스너(onsubmit, onclick, onchange... 등등 on + "event" 들에 대한 설명)
www.zerocho.com/category/JavaScript/post/57432d2aa48729787807c3fc
(JavaScript) 이벤트 리스너와 콜백(event listener, callback)
안녕하세요. 이번 시간은 이벤트 리스너와 콜백 차례입니다. 지금까지는 이벤트 리스너를 안 다뤘습니다만 이제 다룰 때가 된 것 같습니다. 이벤트 리스너와 콜백 방식도 자바스크립트에서 많
www.zerocho.com
- html 이벤트 목록과 이벤트의 형태(속성 / 프로퍼티)
codingnuri.com/javascript-tutorial/html-dom-events-and-event-handling.html
HTML DOM 이벤트와 이벤트 처리 | 자바스크립트 자습서
HTML DOM 이벤트와 이벤트 처리 자바스크립트 프로그램에서는 이벤트 주도 프로그래밍(event-driven programming) 모델을 사용하며, 웹 브라우저ㅇ는 HTML 이벤트를 생성하고, HTML DOM은 자바스크립트가 HTML
codingnuri.com
'웹개발지식쌓기' 카테고리의 다른 글
| 개발환경 구축하기(3) : 메이븐 설치(참조용 url모음) (0) | 2021.06.15 |
|---|---|
| 개발환경 구축하기(2) : 톰캣 서버 설치(참조용 url모음) (0) | 2021.06.15 |
| 개발환경 구축하기(1) : 자바 설치, 이클립스 설치(참조용 url모음) (0) | 2021.06.14 |
| [back] Mybatis foreach 구문 사용하기 (0) | 2021.05.16 |
| [back] Mybatis 오류 - NumberFormatException : "" 와 '' (0) | 2021.04.07 |
