기록
JSP 회원가입 입력폼 본문
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/js/jquery-3.6.3.min.js"></script>
<title>Form Processing</title>
<script type="text/javascript">
//document의 요소들이 모두 로딩(메모리에 올라감)된 후에 실행하라
function fn_chk(){
let phone1 = $("input[name='phone1']").val();
let phone2 = $("input[name='phone2']").val();
let phone3 = $("input[name='phone3']").val();
let phone = phone1 + "-" + phone2 + "-" + phone3;
console.log("phone :"+phone);
$('#phone').val(phone);
//false: form01_process.jsp로 요청이 안됨
return true;
}
</script>
</head>
<body>
<h3>회원 가입</h3>
<!-- 폼태그 -->
<!-- 서브밋(submit) 할 때(on) => onSubmit -->
<form action="form01_process.jsp" name="member" method="post"
onsubmit="return fn_chk()">
<p>
아이디 : <input type="text" name="id" required/>
<input type="button" value="아이디중복검사" />
</p>
<p> 비밀번호 : <input type="password" name="passwd" required/></p>
<p> 이름 : <input type="text" name="name" /></p>
<p>
<input type="hidden" size="4" name="phone" id="phone" />
연락처 : <input type="text" maxlength="4" size="4" name="phone1" />
- <input type="text" maxlength="4" size="4" name="phone2" />
- <input type="text" maxlength="4" size="4" name="phone3" />
</p>
<p>
성별 : <input type="radio" name="gender" value="male" checked/> 남성
<input type="radio" name="gender" value="female"/> 여성
</p>
<p>
취미 : 독서<input type="checkbox" name="hobby" value="독서" checked />
운동<input type="checkbox" name="hobby" value="운동"/>
영화 <input type="checkbox" name="hobby" value="영화" />
</p>
<p>
<!-- size 속성 : 해당 개수대로 미리 보여줌 -->
<select name="city" size="3" >
<option value="대전" selected>대전</option>
<option value="서울">서울</option>
<option value="경기">경기</option>
<option value="인천">인천</option>
<option value="충청">충청</option>
<option value="전라">전라</option>
<option value="경상">경상</option>
</select>
</p>
<P>
<select name="food">
<optgroup label="분식류">
<option value="ddeukboki">떡볶이</option>
<option value="sundai" selected>순대</option>
<option value="tyigim">튀김</option>
</optgroup>
<optgroup label="안주류">
<option value="ddarkbal">닭발</option>
<option value="golbaengi">골뱅이</option>
</optgroup>
<optgroup label="찌개류">
<option value="kimchi">김치찌개</option>
<option value="sundubu">순두부찌개</option>
</optgroup>
</select>
</P>
<p>
<input type="submit" value="가입하기" />
<input type="reset" value="다시쓰기" />
</p>
</form>
</body>
</html>연락처 주의
스크립트에 phone1+phone2+phone3 을합쳐
하나의 input에 붙여줌(히든으로)
결과 처리
<%@page import="java.util.Arrays"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Processing</title>
</head>
<script src="../js/jquery-3.6.3.min.js"></script>
<body>
<% // 스크립틀릿
// 한글 처리
request.setCharacterEncoding("UTF-8");
// form01_process.jsp를 요청 시 폼데이터가 request 객체에 들어가고
// form01_process.jsp로 값들이 전달됨(name1=value1&name2=value2...)
String id = request.getParameter("id");
String pwd = request.getParameter("passwd");
String name = request.getParameter("name");
String phone = request.getParameter("phone");
String gender = request.getParameter("gender");
String city = request.getParameter("city");
String food = request.getParameter("food");
//hobby-> 값이 여러개, 배열로 받아야함!
String[] hobby = request.getParameterValues("hobby"); //여러개의 값을 배열로 받자
/* String hoby = Arrays.toString(hobby);
hoby = hoby.replace("[", "").replace("]",""); */
%>
<!-- 표현문 -->
<p>id : <%=id %></p>
<p>비밀번호 : <%=pwd %></p>
<p>이름 : <%=name %></p>
<p>연락처 : <%=phone %></p>
<p>
<p>도시 : <%=city %></p>
<p>성별 : <%=gender %></p>
<p> 음식 : <%=food %></p>
<p>취미 :
<%
//list는 size, 배열은 length
if(hobby!=null){
for(int i =0; i< hobby.length; i++){
out.print(" "+hobby[i]);
}
}
%>
</body>
</html>
'JSP' 카테고리의 다른 글
| JSP option의 선택한 value값으로 다른 option 값 바뀌게 하기2(도서등록 form) (0) | 2023.01.02 |
|---|---|
| JSP option의 선택한 value값으로 다른 option 값 바뀌게 하기(도서등록 form) (0) | 2023.01.02 |
| JSP 아이디, 비밀번호 가입 form 만들기 (0) | 2022.12.30 |
| JSP 내장 객체 request,response (2탄) (0) | 2022.12.28 |
| JSP 내장 객체 request,response (1탄) (0) | 2022.12.28 |
'JSP' Related Articles
more
Comments