Programming Learning Diary

form 안의 input tag가 아닌 경우에 정보를 전달해야할 경우.

페이지 정보

작성일 19-11-18 15:24

본문

가끔 퍼블리셔분들이 form 태그안에 전달해야 할 내용을 화면 구성때문에 정보를 전달할 수 없는 tag로 퍼블 작업을 넘길때가 있다

다음의 경우이다


 <li class="select">
                        <label for="">졸업여부<img src="img/require.png" alt=""></label>
                        <div class="ect_inner">
                            <p class="title">-</p>
                            <ul class="p_item">
                                <li><a href="javascirpt:;">Yes</a></li>
                                <li><a href="javascirpt:;">No</a></li>
                            </ul>
                        </div>
                        <div class="ect_inner">
                            <p class="title">-</p>
                            <ul class="p_item">
                                <li><a href="javascirpt:;">Yes</a></li>
                                <li><a href="javascirpt:;">No</a></li>
                            </ul>
                        </div>
                        <div class="ect_inner">
                            <p class="title">-</p>
                            <ul class="p_item">
                                <li><a href="javascirpt:;">Yes</a></li>
                                <li><a href="javascirpt:;">No</a></li>
                            </ul>
                        </div>
                    </li> <!--select end-->
    <script>
            $('.select .title').each(function(){
                $(this).on('click',function(){
                    $(this).siblings('.p_item').stop().slideToggle();
                    $(this).toggleClass('on');
                });
            });

            $('.select .ect_inner').find('.p_item').children('li').each(function(){
                $(this).on('click',function(){
                    $(this).parent('ul').stop().slideUp();
                    $('.p_item li').removeClass('on');
                    $(this).addClass('on');
                    var titleValue = $(this).text();
                    $(this).parent('.p_item').siblings('.title').text(titleValue);
                });
             });
    </script>



이런 작업은 좀 난감한 경우이지만 이럴 때에는 input 의 type hidden 속성과 jqury를 사용해서 해결할 수 있다


input hidden 을 생성 -> jqury 함수에 hidden 값을 넣어 줄 수 있는 프로그래밍을 추가 작성


코드



                    <li class="select">
                        <label for="">졸업여부<img src="<?php echo G5_IMG_URL?>/require.png" alt=""></label>

                        <input type="hidden" value="" id="wr_education1_g" name="wr_education1_g">
                        <input type="hidden" value="" id="wr_education2_g" name="wr_education2_g">
                        <input type="hidden" value="" id="wr_education3_g" name="wr_education3_g">

                        <div class="ect_inner">
                            <p class="title" >-</p>
                            <ul class="p_item">
                                <li  d="wr_education1_g" ><a href="javascirpt:;">Yes</a></li>
                                <li  d="wr_education1_g" ><a href="javascirpt:;">No</a></li>
                            </ul>
                        </div>
                        <div class="ect_inner">
                            <p class="title">-</p>
                            <ul class="p_item" id="g2">
                                <li d="wr_education2_g"><a href="javascirpt:;">Yes</a></li>
                                <li d="wr_education2_g"><a href="javascirpt:;">No</a></li>
                            </ul>
                        </div>
                        <div class="ect_inner">
                            <p class="title">-</p>
                            <ul class="p_item"  id="g3">
                                <li d="wr_education3_g"><a href="javascirpt:;">Yes</a></li>
                                <li d="wr_education3_g"><a href="javascirpt:;">No</a></li>
                            </ul>
                        </div>
                    </li> <!--select end-->

    <script>
            $('.select .title').each(function(){
                $(this).on('click',function(){
                    $(this).siblings('.p_item').stop().slideToggle();
                    $(this).toggleClass('on');
                });
            });

           

            $('.select .ect_inner').find('.p_item').children('li').each(function(){
                $(this).on('click',function(){
                    $(this).parent('ul').stop().slideUp();
                    $('.p_item li').removeClass('on');
                    $(this).addClass('on');
                    var titleValue = $(this).text();
                    $(this).parent('.p_item').siblings('.title').text(titleValue);
                    
                    var d=$(this).attr('d');
                    var real_v=document.getElementById(d);
                    real_v.value=titleValue;

                });
             });
    </script>




0e7aeba9455fd4d0faffa05baeda7393_1574058268_7376.png
0e7aeba9455fd4d0faffa05baeda7393_1574058268_828.png
 


댓글목록

등록된 댓글이 없습니다.