반응형
게시판 글쓰기에 제목, 작성자, 내용이 NULL 값, 빈값이라면 창을 띄워서 입력하라고 나오게 만들기
팝업창이 뜨고 확인버튼을 누르면 계속 뒤로 가기가 자동으로 되어서
(action="/writedone") 이 실행이되어서 이를 고치쳐다 발견한 명령어
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
<link href="https://fonts.googleapis.com/css2?family=Gaegu&family=Gamja+Flower&display=swap" rel="stylesheet">
<script type="text/javascript">
function val (){
let subject_tx = document.getElementById("subject_tx");
let writer_tx = document.getElementById("writer_tx");
let content_tx = document.getElementById("content_tx");
if(subject_tx.value==""){
prompt("제목을 입력해주세요르레히호");
event.preventDefault();
} else if(writer_tx.value==""){
alert("작성자를 입력해주세요");
event.preventDefault();
} else if(content_tx==""){
confirm("내용을 입력해주세요");
event.preventDefault();
}
}
</script>
</head>
<body>
<div class="wrap">
<div class="outerbox" >
<div class="innerbox">
<h2 class="main"> 글 작성하기</h2>
<form method="post" action="/writedone">
<div class="mainbox">
<div class="subbox">
<div class="subsubbox">
<span class="sub">제목 :</span>
</div>
<input id="subject_tx" class ="txbox" type="text" name="subject">
</div>
<div class="wribox">
<div class="subsubbox">
<span class="wri">작성자 :</span>
</div>
<input id="writer_tx" class = "txbox" type="text" name="writer">
<br/>
</div>
<div class="d">
<div class="subsubbox">
<span class="con">내용 :</span>
</div>
<input id="content_tx" class = "conbox" type="text" name="content">
</div>
</div>
<div class="btnbox">
<button class="btn"><a href="/board">돌아가기</a></button>
<input class ="btn" type="submit" value="글작성" onclick="val()">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
event.preventDefault(); 을 써주면 된다!
근데 처음 table만들 때 내용에는 NOT NULL 을 안썼어서 저렇게 JS 설정을 해줘도 내용이 없어도 action 이 그대로 취해진다.
팝업창 띄우는 방법 3가지
confrim();
입력창 + 확인 버튼+ 취소 버튼
alert ()
확인버튼
prompt();
확인 버튼 + 취소 버튼
반응형