Full Stack Web Developer.
Syaku (샤쿠)

Java, JS (ES6+), Spring, Spring security, jQuery, Reactjs, Bootstrap.

        

07-03 02:37


Spring Boot 2 보기 Front-end 보기 DevOps 보기 Spring 3 보기 Spring Security 3 보기

폼 전송 일괄처리 : 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"] = "&notnull=idx.1&filter=notnull&title=타이틀";
check["title.2"] = "&notnull=idx.2&filter=notnull&title=타이틀";
check["title.3"] = "&notnull=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
폼 전송 일괄처리 : submit 전송 목록 폼 예제  (0) 2009.04.07
폼 전송 일괄처리  (0) 2009.04.07
페이지네비게이션 구현  (0) 2009.04.06
댓글 남기기
◀ PREV 1···67891011121314···19 NEXT ▶