😊 buttonproc.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/public.css" type="text/css">
<style type="text/css">
span{
display : inline-block;
width : 100px;
height : 30px;
}
form{
border : 2px solid blue;
padding : 5px;
width : 60%;
}
input[type=submit]{
margin-left : 15%;
}
</style>
<script type="text/javascript">
function proc(){
// 스크립트에서 html요소를 검색해서 값을 가져오기
var vqty = document.ff.qty;
var vprice = document.getElementById("price");
var qvalue = vqty.value;
var pvalue = vprice.value;
var result = qvalue * pvalue;
alert("결과 : " + result);
}
</script>
</head>
<body>
<pre>
스크립트에서 html요소를 검색-
name을 이용 : document.폼이름.대상이름
vqty = document.ff.qty
vprice = document.ff.price
id를 이용하는 방법
vqty = document.getElementById('qty')
vprice = document.getElementById('price')
검색한요소에서 입력된 값을 스크립트에서 사용하기
vqty.value
vprice.value
</pre>
<form name="ff" action = "buttonproc.jsp" method="post">
<span>수량</span>
<input type = "text" name="qty" id="qty"><br>
<span>물품가격</span>
<input type="text" name="price" id="price"><br>
<input type="hidden" name="code" value="p101">
<input type="submit" value="전송">
<input type="button" value="확인" onclick="proc()">
</form>
</body>
</html>😊 buttonproc.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>
<style>
h1{
color : red;
}
</style>
</head>
<body>
<h1>JSP : Java Sever Page</h1>
<%
int aa = Integer.parseInt(request.getParameter("qty"));
int bb = Integer.parseInt(request.getParameter("price"));
String code = request.getParameter("code");
int result = aa * bb;
%>
<h3>결과</h3>
코드 : <%= code %><br>
수량 : <%= aa %><br>
가격 : <%= bb %><br>
결과 : <%= result %>
</body>
</html>😊 참고자료
😊 실행
'웹프로그래밍(HTML, CSS3, JavaScript)' 카테고리의 다른 글
| [HTML/jsp] file, select, button, multiple (0) | 2022.12.25 |
|---|---|
| [HTML&Script] formtest2 (0) | 2022.12.23 |
| [HTML&Script] formtest (0) | 2022.12.23 |
| [HTML & Script] videotest (0) | 2022.12.23 |
| [HTML & Script] audiotest (0) | 2022.12.22 |