[JSP] submit 여러 가지 방법

[JSP] submit 여러 가지 방법

---

✔️ 여러 가지 submit 방법

서버로 파라미터를 보내는 역할을 하는 submit . submit 에는 몇 가지 방법이 존재한다.

<button>전송</button> 
<button type="submit">전송</button> 
<input type="submit" value="전송"> 
<input type="image" src="이미지">

 

✔️ submit button 

👩‍💻 submit 버튼은 반드시!! form 태그 안에 있어야 form 태그 안의 파라미터를 서버로 전송한다.

이때, button 타입을 안쓰면 submit 버튼이다.

👩‍💻 submit 은 문제가 있어도 서버로 전송돼서, 버튼 타입이 더 낫다.

<button>전송</button> | 
<button type="submit">전송</button> |
<!-- 둘 다 submit 버튼 -->

 

 

submit 버튼으로 파라미터가 넘어가면, id는 넘어가지 않는다. name 속성만 넘어간다!!

<form action="ex03_ok.jsp" method="post">
	<p>이름 : <input type="text" name="name" required="required"> </p>
	<p>나이 : <input type="text" name="age" required="required" pattern="\d{1,3}"> </p>
	<p>
		<!--  타입 안쓰면 submit 버튼 -->
		<!--  submit 은 문제가 있어도 서버로 전송돼서, 버튼 타입이 더 낫다. -->
		<button>전송</button> | 
		<button type="submit">전송</button> |
		<input type="submit" value="전송"> |
		<input type="image" src="btn_submit.gif" style="vertical-align: bottom;">
		<button type="button">일반버튼- 전송안됨</button>
		<button type="reset">초기화버튼</button>
	</p>
</form>

 

 

✔️ input 하나만 있을 때, submit 기능이 생긴다.

form 태그 안에 <input type="text" name="age"> 가 하나만 있는 경우, 해당 input 칸에서 엔터를 치면 서버로 전송된다. 즉, submit 기능이있다. 이럴 때는 가장 쉬운 방법이 임의의 <input type="text"> 를 하나 더 만들고 display:none 로 주면 엔터 쳐도 서버로 전송되는걸 막을 수 있다.

<form action="ex03_ok.jsp" method="post">
	<p>나이 : <input type="text" name="age"> </p>
	<p>
		<button type="button" onclick="sendOk();">일반버튼- 전송안됨</button>
	</p>
</form>

<script type="text/javascript">
function sendOk() {
	const f = document.forms[1]; //아래 폼 사용할거라 1
	
	if( ! /^(\d)+$/.test(f.age.value) ){
		f.age.focus();
		return;
	}
	
	f.submit();
	
	
}
</script>

 

 

---

✔️ element 요소를 이용해 전송

버튼 타입이 그냥 일반 button 일 때 사용하는 방식으로 , submit 버튼을 이용하는 것보다 안전하다.

<form name="myForm" method="post">
	<p>이름 : <input type="text" name="name"> </p>
	<p>나이 : <input type="text" name="age"> </p>
	<p>
		<button type="button" onclick="sendOk();">전송</button>
		<button type="reset">초기화버튼</button>
	</p>

</form>

<script type="text/javascript">
function sendOk() {
	const f = document.myForm;
	
	if( ! f.name.value ) {
		f.name.focus();
		return;
	}
	
	if( ! /^(\d)+$/.test(f.age.value) ){
		f.age.focus();
		return;
	}
	
	f.action = "ex04_ok.jsp";
	f.submit(); 
	//submit 버튼에서 submit() 함수를 호출하면 서버로 두 번 전송되므로
	// submit() 함수 호출은 submit 버튼이나 이미지 버튼에서 절대로 사용금지!
	
}
</script>

 

버튼에 onclick 이벤트를 줬다. 이벤트를 누르면 sendOk() 가 실행되고, 안에서 해당 폼을 submit() 하여 파라미터를 서버로 전송했다. 일반 버튼이 아닌 submit 버튼에서 submit() 함수를 호출하면 서버로 두 번 전송되므로 submit() 함수 호출은 submit 버튼이나 이미지 버튼에서 절대로 사용금지!