체크 시 Value값 쿠키에 저장 / 다른페이지에 출력하기

#javascript #Cookie #checkbox #value

 

안녕하세요 Gi_1의 개발일기입니다.

최근, 재고리스트에서 재고를 선택하여 제출버튼을 누르면 다른 게시판 or 이메일전송 작성하기 화면으로 넘기는 일을 하게되었습니다.

 

1차적으로, PHP의 POST방식을 이용했지만 클라이언트는 체크한 value값이 페이지를 벗어났다가 돌아와도 유지되기를 바랬습니다. 그래서 Cookie를 이용해서 구현해보고자 합니다.

 

 

INDEX.HTML

 

<form name="estimate" id="estimate" action="/index2.html" method="POST">

<input type="checkbox" name="case[]" value="A|B|C|D|E|F|G|H|" class="search-checkbox-cookie" onclick="checkItem(this);">

 

<input type="checkbox" name="case[]" value="1|2|3|4|5|6|7|8|" class="search-checkbox-cookie" onclick="checkItem(this);">

 

        <div class="inquiry-wrap">

            <input type="button" value="Inquiry" onclick="Inquiry();">

        </div>

 

</form>

 

 

onclick = checkItem(this)를 넣었습니다.

SCRIPT

  function checkItem(chk) {

   

  var chkmno = getCookie("chkmno");

  var arr_chkmno;

  var chk_value = trim(chk.value);

   

  if(chk.checked) {

    if(chkmno == "")

      setCookie("chkmno",chk_value,1);

        else

          setCookie("chkmno",chkmno + "@DSI@" + chk_value ,1);

 

         

             

    } else {

        arr_chkmno = chkmno.split("@DSI@");

        chkmno = "";

        for(i=0;i<arr_chkmno.length;i++) {

            if(chk_value != arr_chkmno[i])

                if(chkmno == "")

                    chkmno = arr_chkmno[i];

                else

                    chkmno = chkmno + "@DSI@" + arr_chkmno[i];

        }

        setCookie("chkmno", chkmno, 1);

    }

}

setCookie("chkmno", "", 1);

 

  function Inquiry() {

    location.href='/index2.html';

    }

    setCookie("chkmno", "", 1);

 

 

INDEX2.HTML

 

 

    <div class="innerCookie estimate-stat-wrap"></div>

    </div>

 

<script>

      function getItem() {

        var chkmno = getCookie("chkmno");

        var arr_chkmno = chkmno.split("@DSI@");

        var txt_arr_chkmno = arr_chkmno.join();

        var replace_txt_chkmno = txt_arr_chkmno.replace(/\@DSI@/g,"");

        var replace_txt_chkmno2 = replace_txt_chkmno.replace(/\,/g,"");

        var realArr_chkmno = replace_txt_chkmno2.split("|");

        var count_chkmno = realArr_chkmno.length -1;

        var RealCount_chkmno = (count_chkmno/7) +1;

        console.log(count_chkmno);

        for(i=0; i<count_chkmno; i+=8){

          ii = (i/8)+1;

          a= i+1;

          b= i+2;

          c= i+3;

          d= i+4;

          e= i+5;

          f= i+6;

          g= i+7;

          $(".innerCookie").append("<ul class='estimate-stat-ul' id='"+ii+"'><li class='estimate-stat-li estimate-stat-num'>"+ii+"</li><li class='estimate-stat-li estimate-stat-pn'><input type='text' name='wr_"+ii+"_1' value="+realArr_chkmno[i]+"></input></li><li class='estimate-stat-li estimate-stat-DC'><input type='text' name='wr_"+ii+"_2' value="+realArr_chkmno[a]+"></input></li><li class='estimate-stat-li estimate-stat-mf'><input type='text' name='wr_"+ii+"_3' value="+realArr_chkmno[b]+"></input></li><li class='estimate-stat-li estimate-stat-qty'><input type='text' name='wr_"+ii+"_4' value="+realArr_chkmno[c]+"></input></li><li class='estimate-stat-li estimate-stat-cont'><input type='text' name='wr_"+ii+"_5' value="+realArr_chkmno[d]+"></input></li><li class='estimate-stat-li estimate-stat-pri'><input type='text' name='wr_"+ii+"_6' value="+realArr_chkmno[e]+"></input></li><li class='estimate-stat-li estimate-stat-LT'><input type='text' name='wr_"+ii+"_7' value="+realArr_chkmno[f]+"></input></li><li class='estimate-stat-li estimate-stat-place'><input type='text' name='wr_"+ii+"_8' value="+realArr_chkmno[g]+"></input></li></ul>");

        }

        if(count_chkmno === 0){

          for(i=1; i<=4; i++){

          a= i+1;

          b= i+2;

          c= i+3;

          d= i+4;

          e= i+5;

          f= i+6;

          $(".innerCookie").append("<ul class='estimate-stat-ul' id='"+i+"'><li class='estimate-stat-li estimate-stat-num'>"+i+"</li><li class='estimate-stat-li estimate-stat-pn'><input type='text' name='wr_"+i+"_1' value=''></input></li><li class='estimate-stat-li estimate-stat-DC'><input type='text' name='wr_"+i+"_2' value=''></input></li><li class='estimate-stat-li estimate-stat-mf'><input type='text' name='wr_"+i+"_3' value=''></input></li><li class='estimate-stat-li estimate-stat-qty'><input type='text' name='wr_"+i+"_4' value=''></input></li><li class='estimate-stat-li estimate-stat-cont'><input type='text' name='wr_"+i+"_5' value=''></input></li><li class='estimate-stat-li estimate-stat-pri'><input type='text' name='wr_"+i+"_6' value=''></input></li><li class='estimate-stat-li estimate-stat-LT'><input type='text' name='wr_"+i+"_7' value=''></input></li><li class='estimate-stat-li estimate-stat-place'><input type='text' name='wr_"+i+"_8' value=''></input></li></ul>");

          }

        }

      }

    </script>

    <script language="JavaScript">

      getItem();

    </script>

 

 

저는 그누보드를 이용해 개발하였고 A라는 게시판 리스트에서 체크하여 B라는 게시판의 글작성화면으로 넘기는 방법을 선택하였습니다.

더욱 간단한 코드가 있을 수 있지만 저는 스크립트가 약해서 코드가 조금 더러울 수 있는점 참고 부탁드리고 혹시 필요하신 분들에게 도움이 되기를 바랍니다^^