button 태그와 submit 태그의 차이
button : 버튼 코드만 실행되며 form 태그 안에 있더라도 action 은 실행되지 않는다
submit : form 태그의 action 이 실행된다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
test = () => {
let txt = document.getElementById("txt");
if (txt.value == "") {
alert("값을 입력하세요.");
return;
}
let f = document.getElementById("fo");
fo.submit();
// 위 fo.submit(); 코드는 button 이 작동했을때
// 유효성 검사를 마치고 바로 action 으로 이동시키기 위한 코드이다.
};
</script>
</head>
<body>
<form id="fo" action="ex32.html">
<input type="text" id="txt" /><br />
<input type="submit" onclick="test()" value="submit전송" />
<!-- submit 을 사용하면 코드를 실행하면 무조건 -->
<!-- form 태그의 action 을 실행함... 그러므로 검증되지 않아도 -->
<!-- ex32.html 페이지로 넘어가버림 -->
<input type="button" onclick="test()" value="btn전송" />
<!-- button 을 사용하면 코드를 실행하고 form 의 action 을 -->
<!-- 실행하지 않음.... 그러므로 유효성 검사를 마친 뒤 -->
<!-- 위의 스크립트 코드처럼 submit() 을 따로 실행시켜줘야 함 -->
</form>
</body>
</html>728x90
'FE > JavaScript' 카테고리의 다른 글
| [JavaScript] 클래스 추가, css 추가 (0) | 2024.03.27 |
|---|---|
| [JavaScript] JQuery 사용법 (0) | 2024.03.27 |
| [JavaScript] confirm, open (0) | 2024.03.27 |
| [JavaScript] 자바스크립트로 비밀번호 유효성 검사 (0) | 2024.03.27 |
| [JavaScript] js 파일로 자바스크립트 코드 관리 (0) | 2024.03.27 |