note.jsp
<%@ 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>
<script type="text/javascript">
// 자료입력
function init(){
var f=document.forms[0]; // 폼의 배열 순서대로 숫자를 넣어줘야 한다. 0부터
f.s1[0]=new Option("홍길동","길동"); // text(우리가 보는 텍스트), value(들어갈 데이터)
f.s1[1]=new Option("이순신","순신");
f.s1[2]=new Option("강갑찬","갑찬");
f.s1[3]=new Option("한가인","가인");
f.s1[4]=new Option("장동건","동건");
f.s1[5]=new Option("고소영","소영");
}
// 왓다리 갓다리 메소드
function moveItem(arg){
var f=document.forms[0];
var source, target;
if(arg=="left" || arg=="leftAll"){
source=f.s2;
target=f.s1; // 보내진 객체
}else{
source=f.s1;
target=f.s2;
}
// 왼쪽이나 오른쪽으로 모두 보내기
var n=target.options.length;
if(arg=="leftAll" || arg=="rightAll"){
for(var i=source.options.length-1; i>=0; i--){
target[n++]=new Option(source[0].text,source[0].value);
source[0]=null;
}
return;
}
// left, right
var len=source.options.length;
for(var i=0; i<len; i++){
if(source.options[i].selected){
target[n++]=new Option(source[i].text,source[i].value);
source[i]=null;
len--;
i--;
}
}
}
// 보내는 메소드
function send(){
var f=document.forms[0];
if(f.s2.length==0){
alert("보낼 사람을 선택하세요");
return;
}
if(! f.content.value){
alert("내용 입력하세요......");
f.content.focus();
return;
}
for(var i=0; i<f.s2.length; i++)
f.s2[i].selected=true; // 해당 객체의 값들(배열이라서)을 선택한 상태로 만들어준다.(직접선택하지 않아도 선택된 상태로 된다.)
f.action="note_ok.jsp"; // button 버튼을 썼을 때 사용하는 보낼 주소
f.submit(); // button은 sumit과 달리 자체적으로 보내는 기능이 없으므로 써줘야한다.
}
</script>
</head>
<center>
<body onload="init();">
<!-- 실행과 동시에 적용(init()메소드를 호출) -->
<form method="post" action="note_ok.jsp" onsubmit="return send();">
<table>
<tr>
<td>
<select name="s1" multiple="multiple" style="width: 200px; height: 150px;"></select>
</td>
<td>
<input type="button" value=">" onclick="moveItem('right');"><br/>
<input type="button" value=">>" onclick="moveItem('rightAll');"><br/>
<input type="button" value="<" onclick="moveItem('left');"><br/>
<input type="button" value="<<" onclick="moveItem('leftAll');"><br/>
</td>
<td>
<select name="s2" multiple="multiple" style="width: 200px; height: 150px;"></select>
</td>
</tr>
</table>
<textarea name="content" rows="20" cols="60"></textarea><br/>
<input type="button" value="등록하기" onclick="send()";>
<input type="reset" value="다시입력">
</form>
</center>
</body>
</html>
===============================================================================================================================================
note_ok.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
String s="";
String rec[]=request.getParameterValues("s2");
if(rec!=null){
for(String ss:rec)
s+=ss+" ";
}
String content=request.getParameter("content");
content=content.replaceAll("\n","<br/>"); // 엔터입력을 적방법용시키는 방법 replaceAll("\n","<br/>")
content=content.replaceAll(" ", " ");
%>
<!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>
받은 사람 : <%=s%><br/>
내용 : <%=content %>
</body>
</html>
'JSP(Java Server Page)' 카테고리의 다른 글
| JSP 정보 확인하는 메소드 (0) | 2013.06.25 |
|---|---|
| JSP 기본 예제(달력 만들기) (0) | 2013.06.25 |
| input의 type을 image로 줄 때 (0) | 2013.06.25 |
| input의 type을 submit으로 줄 때 (0) | 2013.06.25 |
| input type을 button으로 줄 때 (0) | 2013.06.25 |