폼 전송 일괄처리 : submit 전송 목록 폼 예제
Action 을 이용한 목록 폼 소스 예제입니다. 아래의 소스를 직접 실행하고, 주석을 참조하세요.
Example Source
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ko" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta content="no" http-equiv="imagetoolbar"/>
<title>목록에서 사용법 : Action Form Checking : 액션 폼 체크</title>
<!-- Action 스크립트 호출 -->
<script type="text/javascript" language="javascript" src="./action.js"></script>
</head>
<body>
<div>
<div class="buttonArea">
<!--
# submit 아닌 경우의 사용법
getAction(객체 , 폼체킹태그 , 쿼리문자열(GET 파라메타) , 최초실행 함수 리턴값은 boolean , 리턴받을 함수)
쿼리문자열(GET 파라메타) 은 폼 속의 엘리먼트의 값을 임의적으로 변경하는 역활을 합니다.
mode=clean 은 <input type="hidden" id="mode" name="mode" /> 이부분의 value 값을 clean으로 변경 혹은 적용한다는 말입니다.
최초실행 함수의 return 값이 true 인 경우 계속 진행하고, false 인 경우 getAction 을 강제 종료합니다.
리턴받을 함수는 getAction 필터링 과정이 모두 성립할 경우 결과를 함수로 전송합니다.
-->
<input type="button" onclick="getAction($('list_form'),check,'&mode=clean&xask=delete',null,'form.submit();');" value="선택삭제" />
<input type="button" onclick="getAction($('list_form'),check,'&mode=update&xask=update',null,'form.submit();');" value="선택수정" />
</div>
<form id="list_form" method="post" action="">
<input type="hidden" id="mode" name="mode" />
<!--
getAction 의 필터 과정이 성립한 경우 아래의 질문 메세지를 출력합니다. (예 : 저장하시겠습니까?)
value 값과 message.xml 의 노드가 일치하는 질문 메세지를 출력합니다.
-->
<input type="hidden" id="xask" value="" />
<table cellspacing="0" border="1">
<col width="5%" />
<col width="20%" />
<col />
<thead>
<tr>
<th scope="col">
<!--
해당 체크박스의 전체 선택 및 해제 합니다.
allCheck(폼객체, 체크할 체크박스 엘리먼트 명 , this.checked);
-->
<input type="checkbox" onclick="allCheck($('list_form.idx'),this.checked);" />
</th>
<th scope="col">제목</th>
<th scope="col">입력란</th>
</tr>
</thead>
<tbody>
<!-- 목록의 반복문 시작 -->
<tr>
<td><input type="checkbox" id="idx.1" name="idx" value="1" /></td>
<td>안녕하세요.</td>
<td style="text-align:left;">
<input type="text" id="title.1" name="title" />
</td>
</tr>
<!-- 이하 반복문 -->
<tr>
<td><input type="checkbox" id="idx.2" name="idx" value="2" /></td>
<td>안녕하세요.</td>
<td style="text-align:left;">
<input type="text" id="title.2" name="title" />
</td>
</tr>
<tr>
<td><input type="checkbox" id="idx.3" name="idx" value="3" /></td>
<td>안녕하세요.</td>
<td style="text-align:left;">
<input type="text" id="title.3" name="title" />
</td>
</tr>
<!-- 목록의 반복문 끝 -->
</tbody>
</table>
</form>
</div>
<script type="text/javascript">
//<![CDATA[
// 폼 체킹 선언
var check = new Array("idx","title.1","title.2","title.3");
/*
1. 폼 체킹 선언 배열의 값은 필터링을 위한 문자열을 입력하는 곳 입니다. 꼭 &로 시작하여야 합니다.
2. title 은 경고 메서지의 "무엇을 입력하세요" 와 같은 문장을 구성하는 단어로 사용합니다.
3. 여러 종류의 필터링이 존재합니다. (노트를 참조하세요.)
현(this) 엘리먼트의 id 속성(idx)과 관련이 있는 배열 엘리먼트들을 조회합니다.
최소 1개 이상 선택이 되어있는 지를 체크하게 됩니다.
위 조건이 성립하지 못한다면 "목록을(를) 선택하세요." 라는 경고 창을 출력하게 됩니다.
*/
check["idx"] = "&array=1,0&title=목록";
/*
필터 쿼리문자열 설명 :
idx.1 의 체크박스가 체크가 되어있을 때만 현(this) 엘리멘트의 입력 값이 notnull 인지 체크합니다.
위 조건이 성립하지 못한다면 "타이틀을(를) 입력하세요." 라는 경고 창을 출력하게 됩니다.
*/
check["title.1"] = "¬null=idx.1&filter=notnull&title=타이틀";
check["title.2"] = "¬null=idx.2&filter=notnull&title=타이틀";
check["title.3"] = "¬null=idx.3&filter=notnull&title=타이틀";
//]]>
</script>
</body>
</html>
written by Seok Kyun. Choi. 최석균.
http://www.cyworld.com/syaku
http://syaku.tistory.com
'개발노트 > JavaScript' 카테고리의 다른 글
| JSON : 자바스크립트 (0) | 2009.04.18 |
|---|---|
| Action Framework (0) | 2009.04.15 |
| 폼 전송 일괄처리 (0) | 2009.04.07 |
| 페이지네비게이션 구현 (0) | 2009.04.06 |