WEB Archive
[HTML] form.submit() 활용한 구구단 출력
universedevelope
2024. 8. 22. 08:25
Send05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Send05.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript">
function formChange(obj)
{
//alert("1");
//확인
//alert(obj);
//--==>> [object HTMLFormElement]
// ※ obj 변수(이 함수의 매개변수)에는 form 객체가 저장되어 있다.
// 필요에 따라 전송하기 전에 검증 절차를 추가하는 것이 가능하다.
obj.submit();
// 『폼.submit()』 ≒ 폼.reset()
// 함수 호출을 통해 form 객체의 데이터를 서버로
// 전송하는 것이 가능하다.
// 1단선택 Receive05.jsp?dan=1 → dan 값 전송완료
}
</script>
</head>
<body>
<!-- ○ 데이터 송수신 실습 05
- 구구단 결과를 출력하는 JSP 페이지(Receive05.jsp)를 구성한다.
- 원하는 단수를 입력받아 화면에 출력해주는 형태의 페이지로 구현한다.
- 단, submit 버튼 없이 이벤트 처리를 할 수 있도록 한다.
단 수 선택 [ 1단 ▼ ] → select
2단
3단
:
9단
- select 선택 시
해당 단의 구구단 내용을 출력하는 JSP 페이지(Receive05.jsp)로
데이터를 전달하여 내용을 구성할 수 있도록 한다.
- 사용자 최초 요청 페이지 주소
http://localhost:8090/WebApp07/Send05.html
○ Send05.html
Receive05.jsp
-->
<div>
<h1> 데이터 송수신 실습 05</h1>
<hr>
</div>
<div>
<form action="Receive05.jsp" method="get">
단 수 선택 ▶
<select id="dan" name="dan" onchange="formChange(this.form)">
<option>▼ 선택 ▼</option>
<option id="1" value="1"> 1단 </option>
<option id="2" value="2"> 2단 </option>
<option id="3" value="3"> 3단 </option>
<option id="4" value="4"> 4단 </option>
<option id="5" value="5"> 5단 </option>
<option id="6" value="6"> 6단 </option>
<option id="7" value="7"> 7단 </option>
<option id="8" value="8"> 8단 </option>
<option id="9" value="9"> 9단 </option>
</select>
</form>
</div>
</body>
</html>
Receive05.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
// 스크립트 릿
String dan = request.getParameter("dan");
int dansu = 0;
String result = "";
try
{
dansu = Integer.parseInt(dan);
for(int i=1; i<=9; i++)
{
result += String.format("%d * %d = %d<br>", dansu, i, (dansu*i));
}
}
catch(Exception e)
{
System.out.println(e.toString());
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Receive05.jsp</title>
</head>
<body>
<div>
<h1>데이터 송수신 실습 05</h1>
<hr>
</div>
<div>
<h2>구구단 결과 확인</h2>
<div>
<%=result %>
</div>
</div>
</body>
</html>728x90