<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href = "../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$('#btnview').on('click', function(){
//입력한 값 가져오기
str = "이름 : " + $('#user').val() + "<br>";
str += "성별 : " + $('#gend:checked').val() + "<br>";
intro = $('#intro').val();
intro = intro.replace(/\r/g, "").replace(/\n/g, "<br>");
str += "소개 : <br>" + intro + "<br>";
str += "직업 : " + $('#work option:selected').val() + "<br>"
$('#result1').html(str);
})
$('#btnchange').on('click', function(){
//이름 입력
username = prompt("이름 입력");
//user의 이름을 변경
$("#user").val(username);
})
})
</script>
</head>
<body>
<div class = "box"> $('#gend').val()
조사하기 클릭시 : 입력한 값들을 script에서 처리하여 result1에 출력<br>
이름 변경 클릭시 prompt를 이용하여 입력받아 이름을 변경한다<br>
<form action="test.jsp">
<label for="user">이름</label>
<input type="text" id="user" value="korea"><br>
<label >성별</label>
<input type="radio" id="gend" name="gend" value="남자" checked >남자
<input type="radio" id="gend" name="gend" value="여자" >여자<br>
<label for="intro">소개</label> <br>
<textarea id="intro" cols="40" rows="4"></textarea> <br>
<label for="work">직업</label>
<select id="work">
<option value="programmer">프로그래머</option>
<option value="progammer">프로게이머</option>
<option value="whitehand">백수</option>
</select><br>
<button type="button" id="btnview">조사하기 </button>
<button type="button" id="btnchange">이름변경 </button>
</form>
<br>
<div id = "result1"></div>
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>JSP : Java server info</h1>
</body>
</html>
신입 개발자 입니다!!!