Jam's story

[JSP] input 값 넘기기 본문

JSP

[JSP] input 값 넘기기

애플쩀 2022. 5. 19. 07:57

 

성, 이름 받기 

prac.html

 

  • form 에 jsp 파일을 주어야 한다. method는 get, 파일전송은 post 
    • 예) <form action="NewFile.jsp" method="get">
  • name을 주어야 한다. 그래야 d값이 넘어간다. 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form action="NewFile.jsp" method="get">
First Name:<br>
<input type="text" name="fname"autofocus="autofocus"><br>
<input type="text"name="lname">
<input type="submit">
</form>
</body>
</html>

NewFile.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<% 
String fname=request.getParameter("fname");
String lname=request.getParameter("lname");
%>
first name=<%= fname %>
last name= <%= lname %>
</body>
</html>

처음에 오류났었는데, <% %>를 안써서 오류

 

 

 

이름과 나이 

prac.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form action="NewFile.jsp" method="get">
 Name:<br>
<input type="text" name="name"autofocus="autofocus"><br>
Age:<br>
<input type="text"name="age">
<input type="submit">
</form>
</body>
</html>

 

NewFile.jsp

request.getParameter는 String을 반환하기 때문에, int형에 넣기 위해서는 형변환을 해주어야 한다. 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<% 
//스크립트릿- 자바코딩 
String name=request.getParameter("name");
int age=Integer.parseInt(request.getParameter("age"));
%>
name=<%= name %>
age= <%= age %>
</body>
</html>

 

<input type="reset" >

자동으로 모든 것들이 초기화 되어지는 버튼 

 

 

버튼태그로 제출 
<button type="submit">제출</button>

 

input 태그로 버튼을 만들려면, value 값을 주어야 한다. 
<input type="button" value="제출">

 

 

input태그로 submit 기능 추가 -자바스크립트 
<form action="NewFile.jsp" method="get" id="form1">
 Name:<br>
<input type="text" name="name"autofocus="autofocus"><br>
Age:<br>
<input type="text"name="age">
<!-- <input type="submit"> -->
<button type="submit">제출</button>
<input type="reset" >
<!-- onclick 속성으로 click 이벤트 처리  -->
<input type="button" value="제출"  onclick="send();">
</form>
<script>
//폼태그를 가져오기 위해 자바스크립트로 코딩 
function send(){
	//이벤트가 발생하는지 체크 후에 코딩
	alert("이벤트 발생 체크 후 코딩 ");
	var f1=document.getElementById("form1");
	f1.submit();
	
}
</script>
  • 폼태그를 가져오기 위해 자바스크립트로 코딩 
  • onclick 속성으로 click 이벤트 처리 
  • 처음에 오류났는데 onclick="send();" 여기서 세미콜론 빠트림 
  • 입력값의 유효성 검사를 할 떄 이 방법을 쓴다.
  • 하나의 html 태그 안에 form 태그가 여러개 있어도 상관 없다. 

 

Comments