최근 조원들과 최종 프로젝트를 하면서, jsp파일에서 클릭을 했을 때 바로 컨트롤러로 넘어가지 않고, 유효성 검사를 마친 후 넘어가도록 설정하고싶었습니다.
html에서 a태그나 button(submit타입)태그를 클릭하면 페이지가 이동하거나 새로고침이 됩니다.
하지만 페이지가 이동하거나 새로고침이 되는 동작을 막고싶은 경우 javascript의 preventDefault를 사용하면 이를 해결할 수 있습니다.
prefentDefault()를 사용하여 제가 생각한 로직을 정리하였습니다.
|
button 태그 클릭 -> event.preventDefault()를 통해 잠시 이벤트를 막음 -> form태그 안의 내용의 유효검사 실시 -> return 혹은 form.submit() |
이를 통해 예시를 들어 설명하겠습니다.
<body>
<h1>값을 입력하세요</h1>
<form id="frm" type="post" action="test">
<input type="text" id="value" name="text">
<input type="submit" id="btn" value="button">
</form>
</body>
<script>
$("#btn").on("click", function(e){
e.preventDefault();
var frm = $("#frm");
var text = $("#value").val();
if(text == '') {
alert("값을 입력해주세요.");
return;
} else {
$("#value").val("");
alert("입력한 값은 "+text+"입니다.");
frm.submit();
}
})
</script>
body태그의 form태그가 있습니다. form태그에는 두개의 input태그가 있는데, 이는 text타입 하나, submit타입 하나입니다. 입력칸에 값을 입력하면 입력한 값을 경고창에 표시하고나서 submit이 되고, 만약 값이 없다면 값을 입력하라는 경고창과 함께 submit이 되지 않게 설정했습니다.
아래 출력결과와 함께 설명하겠습니다.
body태그의 내용입니다.
빈 값을 입력했을 때의 결과입니다.
이번에는 'hello'라는 문구와 함께 버튼을 클릭하겠습니다.
입력한 값을 나타내는 경고창과함께 확인 버튼을 클릭하면 submit이 되어 페이지가 이동하게 됩니다.
참고자료
'코딩 > JavaScript' 카테고리의 다른 글
| Javascript document.querySelector(All) (0) | 2020.09.26 |
|---|---|
| Javascript DOM Element, Node (0) | 2020.07.27 |
| JavaScript location.href (0) | 2020.07.08 |
| Java 배열을 이용한 로또번호 생성 (0) | 2020.07.01 |
| JavaScript 반복문으로 구구단 만들기(table) (0) | 2020.06.30 |
최근댓글