alert창 나타나게 하는법

 

<script src="/resources/js/my.js"></script>

js코드를 모아놓은 파일을 만들고 jsp 파일 맨 위에 script 태그 생성한 후 경로지정

 

 

<insert.jsp> 코드 전문

<form enctype="multipart/form-data" id="id_writeform" method="post" action="/board/insert" class="user" name="writefrm"> 
    
    <div class="form-group row">
		<div class="col-sm-6 mb-3 mb-sm-0">
			<label>제목</label>
			<input type="text" id="id_subject" class="form-control" name="b_subject">
		</div>
	</div>
    
	<div class="form-group row">
		<div class="col-sm-6 mb-3 mb-sm-0">
			<label>이름</label>
			<input type="text" id="id_subject" class="form-control" name="b_subject">
		</div>
	</div>
    
	<div class="form-group row">
		<div class="col-sm-6 mb-3 mb-sm-0">
			<label>내용</label>
			<input type="text" id="id_subject" class="form-control" name="b_subject">
		</div>
	</div>
    
	<div class="form-group row">
		<div class="col-sm-6 mb-3 mb-sm-0">
			<label>파일</label>
			<input type="file" class="form-control" name="b_file">
		 </div>
	</div>
    
	<input type="button" id="id_btn" class="form-control" value="등록" onclick="writeForm();">
    
</form>

 

<my.js> javascript 코드 전문

	function writeForm() { 
		let thisform = document.writefrm; 
		//thisform.method = "post"; // form태그 내에 method 지정해줘서 주석처리함
		//thisform.action = "/board/insert"; // form태그 내에 action 지정해줘서 주석처리함
		let id_subject = document.getElementById('id_subject').value; // 텍스트상자의 값
		if (id_subject == '') {
			alert('제목을 입력하세요');
		} else {
			thisform.submit(); // form 전송
		}
	};

 

---

 

1] 글 등록시, 제목을 입력하지 않고 등록을 클릭하면 alert창이 나타나게 하려고 한다

function writeForm() { 
		let thisform = document.writefrm; 
		let id_subject = document.getElementById('id_subject').value; 
		if (id_subject == '') {
			alert('제목을 입력하세요');
		} else {
			thisform.submit();
		}
	};

 

function writeForm() : writeForm() 이라는 함수를 생성한다, 즉 함수의 이름임

let thisform = document.writefrm; :

insert.jsp의 form에 writefrm이라는 name을 줬었다, javascript에서 writefrm으로 접근

let id_subject = document.getElementById('id_subject').value; :

insert.jsp의 form내에 제목의 input태그에 id_subject 라는 id을 줬었다, id_subject의 값을 가져오겠다는 뜻

if (id_subject == '') { // 1. id_subject가 빈값이라면
alert('제목을 입력하세요'); // 2. 제목을 입력하세요 이라는 경고창이 뜨고
} else { // 3. 그렇지 않으면(= id_subject가 값이 있다면)
thisform.submit(); } // 4. form을 전송한다(이 때문에 form에 method와 action이 지정되어야 함, 무슨 방법으로 어디로 전송할건지 명시해주어야 하므로)

2] 글 등록 시, 글이 등록되었습니다 alert창 나타나게 하려고 한다

function writeForm() { 
		let thisform = document.writefrm; 
		let id_subject = document.getElementById('id_subject').value; 
		if (id_subject == '') {
			alert('제목을 입력하세요');
		} else {
			thisform.submit();
          		alert("글이 등록되었습니다"); // 추가
		}
	};

 

3] 형식에 맞는 함수 실행방법

// button 눌러서 js실행
<input type="button" id="id_btn" class="form-control" value="등록" onclick="writeForm();">

// a태그 눌러서 js실행하기
<a href="javascript:writeForm2();">글쓰기</a>

전자는 onclick 에 함수를 걸어주고, 후자는 a태그에 다음과 같은 형식으로 함수를 걸어준다