1. button과 submit
① submit
○ 무조건 action을 찾아감
○ action에다가는 값을 가지고 갈 페이지를 적는다 ("listTable_ok.jsp")
○ 컬럼의 이름은 name의 이름과 같아야 한다.
○ 일반적으로 스크립트가 없을때 사용
② button
○ 스크립트가 있을때는 button을 사용하고 맨 마지막에
document.myForm.submit(); 과 document.myForm.action=”listTest_ok.jsp” 작성
2.예제
add / remove / add all / remove all 클릭시 Available↔Configured 이동
① listTest.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("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>
<style type="text/css">
body {
font-size: 10pt;
}
.itemBtn{
font-size:9pt;
color: rgb(0,0,0);
background-color: rgb(240,240,240);
width: 30pt;
}
.btn{
font-size:9pt;
color: rgb(0,0,0);
background-color: rgb(240,240,240);
}
.itemList{
font-size: 9pt;
width: 100pt;
}
</style>
<script type="text/javascript">
function itemAdd() {
var f = document.myForm;
var leftItem = f.leftItem;
//하나하나 다 객체를 생성해줘야한다.
leftItem[0] = new Option('배수지','배수지');
leftItem[1] = new Option('전지현','전지현');
leftItem[2] = new Option('이하나','이하나');
leftItem[3] = new Option('천송이','천송이');
leftItem[4] = new Option('한가인','한가인');
leftItem[5] = new Option('이윤성','이윤성');
leftItem[6] = new Option('배슬기','배슬기');
}
function itemMove(val) {
var f = document.myForm;
var source,target;
if(val=="left"){
source = f.rightItem;
target = f.leftItem;
}
else{
source = f.leftItem;
target = f.rightItem;
}
var n,i;
n = target.length;
for(i=source.length-1;i>=0;i--){
if(source.options[i].selected){
target[n++] = new Option(source.options[i].text,source.options[i].value);
source[i] = null;
}
}
}
function sendIt() {
var f = document.myForm;
if(f.rightItem.length==0){
alert("쪽지 보낼 사람을 선택해주세요");
f.rightItem.focus();
return;
}
if(!f.msg.value){
alert("메세지를 입력해주세요");
f.msg.focus();
return;
}
for(var i=0;i<f.rightItem.length;i++){
f.rightItem[i].selected = true;
//같은 내용 f.rightItem.options[i].selecter = true;
}
f.action = "listTest_ok.jsp";
f.submit(); /* 모든 조건문을 실행한 뒤 submit 실행. action으로 찾아가는 경로. */
}
</script>
</head>
<body onload="itemAdd();"> <!-- 초기화할때 많이 사용 -->
<!-- 자바스크립트에서는 name을 통해 설정이 가능하기 때문에 name을 설정 해 주어야한다 -->
<form method="post" name="myForm">
<table border="0" style="font-size: 10pt">
<tr align="center">
<td width="150">전체 리스트</td>
<td width="70"> </td>
<td width="150">받는 사람</td>
</tr>
<tr align="center">
<td width="150">
<select name="leftItem" multiple="multiple" size="7" class="itemList"> <!-- 무조건 인덱스 번호가 생성 -->
<!-- <option value="배수지">배수지</option> //이렇게 생성하면 이동 불가 -->
</select>
</td>
<td width="70">
<input type="button" value="▶" class="itemBtn" onclick="itemMove('right');"></br></br>
<input type="button" value="◀" class="itemBtn" onclick="itemMove('left');"></br>
</td>
<td width="150">
<select name="rightItem" multiple="multiple" size="7" class="itemList">
<!-- <option value="배수지">배수지</option> -->
</select>
</td>
</tr>
<tr align="center">
<td colspan="3">
</br>메세지</br>
<textarea rows="5" cols="50" name="msg" ></textarea>
</td>
</tr>
<tr align="center">
<td colspan="3">
<input type="button" value="쪽지 보내기" class="btn" onclick="sendIt();">
</td>
</tr>
</table>
</form>
</body>
</html>
listTest.jsp
버튼 사용시 form에 action="listTest_ok.jsp"가 있어도 listTable_ok.jsp로 넘어가지 않으므로,
document.myForm.submit(); 과 document.myForm.action=”listTest_ok.jsp”를 작성해주어야 한다. ▶ 작성 위치 확인
② listTest_ok.jsp
<%@page import="sun.misc.Perf.GetPerfAction"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String msg = request.getParameter("msg");
String rightItem[] = request.getParameterValues("rightItem");
msg = msg.replaceAll("\r\n", "</br>");
String str = "";
if(rightItem!=null){
for (String temp : rightItem){
str += temp +" ";
}
}
%>
<!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>
받는사람: <%=str %></br>
메세지</br>
<%=msg %></br>
</body>
</html>
결과
listTest.jsp
listTest.jsp ▶클릭
listTest_ok.jsp
3. 예제(2) : button과 submit
① button1.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("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>
<script type="text/javascript">
function sendIt(val){
//var f = document.myForm;
var f = document.forms[0]; //form도 자동으로 인덱스가 생성된다
if(!f.name.value){
alert("이름을 입력해주세요");
f.name.focus();
return;
}
if(val=='a'){
f.action = "button2.jsp";
}
else{
f.action = "button3.jsp";
}
f.submit();
}
function sendData() {
var f = document.forms[1];
if(!f.name.value){
alert("이름을 입력해주세요");
f.name.focus();
return false;
}
f.submit();
}
</script>
</head>
<body>
<form action="" method="post" name="myForm" >
이름:<input type="text" name="name"></br>
<input type="button" value="첫번째 전송" onclick="sendIt('a');">
<input type="button" value="두번째 전송" onclick="sendIt('b');">
</form>
<form action="" method="post" name="myForm1" onsubmit="return sendData();">
이름:<input type="text" name="name"></br>
<input type="submit" value="첫번째 전송" onclick="this.form.action='button2.jsp';">
<input type="submit" value="두번째 전송" onclick="this.form.action='button3.jsp';">
</form>
</body>
</html>
결과
<input type="button" value="첫번째 전송" onclick="sendIt('a');">
<input type="button" value="두번째 전송" onclick="sendIt('b');">
① 버튼 클릭시 sendIt(val) 실행
② 이름을 입력하지 않으면 이름을 입력하라는 알람창 실행
③ 넘어간 값(val)이 a이면 button2.jsp실행
아니면 button3.jsp 실행
<input type="submit" value="첫번째 전송" onclick="this.form.action='button2.jsp';">
<input type="submit" value="두번째 전송" onclick="this.form.action='button3.jsp';">
① submit 클릭시
② button2.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
%>
<!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>
첫번째:<%=name %></br>
</body>
</html>
③ button3.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
%>
<!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>
두번째:<%=name %></br>
</body>
</html>
button1.jsp
첫번째 전송 클릭 ▶ button2.jsp
두번째 전송 클릭 ▶ button3.jsp
'STUDY > JSP' 카테고리의 다른 글
| Jsp5일차 - Get방식과 Post방식 (0) | 2019.02.15 |
|---|---|
| Jsp 4일차 - buffer (0) | 2019.02.15 |
| Jsp 4일차 - jsp영역 안에서 html사용 (0) | 2019.02.15 |
| Jsp 4일차 - request & response (0) | 2019.02.14 |
| Jsp 4일차 - 이벤트 (0) | 2019.02.14 |
댓글