위토즈 - 개발자프로그램판매공간

정보공유

[JQUERY] 폼을 생성하고 선택된(필요한) 영역의 값만 전송


필요한 영역만 ajax 로 전송 하는 방법.



<form method="post" name="wzfrm" id="wzfrm" action="" onsubmit="return getNext();" autocomplete="off">

    <div class="wrap-doc-input">

        <div>

            <input type="hidden" name="extend_fil_mode[]" class="attach-file-mode" value="1">

            <input type="hidden" name="extend_fil_type[]" value="WORD">

        </div>

        <div>

            <input type="hidden" name="extend_fil_mode[]" class="attach-file-mode" value="2">

            <input type="hidden" name="extend_fil_type[]" value="PDF">

        </div>

        <input type="text" name="upload_reason" id="" value="테스트1">

        <input type="button" value="전송" class="btn-submit">

    </div>

    <div class="wrap-doc-input">

        <div>

            <input type="hidden" name="extend_fil_mode[]" class="attach-file-mode" value="3">

            <input type="hidden" name="extend_fil_type[]" value="WORD">

        </div>

        <div>

            <input type="hidden" name="extend_fil_mode[]" class="attach-file-mode" value="4">

            <input type="hidden" name="extend_fil_type[]" value="PDF">

        </div>

        <input type="text" name="upload_reason" id="" value="테스트2">

        <input type="button" value="전송" class="btn-submit">

    </div>

</form>


<script type="text/javascript">

<!--

    jQuery(document).ready(function () {

        $(document).on('click', '.btn-submit', function() {


            let tmpForm = document.createElement('form');

                tmpForm.setAttribute('charset', 'utf-8');

                tmpForm.setAttribute('method', 'post');


            let formData = new FormData($(tmpForm)[0]);

            let $parent = $(this).closest('.wrap-doc-input');


            let $inputs = $parent.find('input:hidden, input:text');

                $inputs.each(

                    function() {

                        formData.append($(this).attr('name'), $(this).val());

                    }

                );



            $.ajax({

                url: g5_bbs_url+'/test_update.php',

                data: formData,

                processData: false,

        contentType: false,

                dataType: 'json',

                type:'post',

                success:function(req) {

                    ;

                }

            });


        });

    });

//-->

</script>


정보공유
Total 49건 1 페이지
번호 제목 글쓴이 날짜 조회
49 magnificPopup css 를 추가하여 popup 마다 다른 사이즈 로 띄우기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-16 806
48 magnificPopup 조건이 맞지 않으면 popup 띄우지 않기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-12 773
47 magnificPopup iframe 으로 form submit 하기 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-12 897
46 magnificPopup 으로 창을 호출 후 날짜 입력박스에 datepicker 실행되지 않는경우 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-13 1828
45 magnificPopup 파라미터 변수 값 ajax 타입으로 전송 방법 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-31 1897
44 jquery 로 text 필드와 file 첨부를 동시에. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-09 2018
43 파일 첨부 를 이미지버튼으로 대체한경우 첨부한 파일명 표시하기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-09 1989
열람중 폼을 생성하고 선택된(필요한) 영역의 값만 전송 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-17 2515
41 탭으로 나눠지는 슬라이드 쇼 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-13 3277
40 jquery fullcalendar eventOrder 정렬 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-23 11102
39 주소복사 계좌번호복사 URL복사 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-11 10730
38 jquery 스와이프 메뉴 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-15 10965
37 datepicker range select 커스터마이징 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-30 14762
36 URL 에 포함되어있는 특정 파라미터값 가져오기 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-29 13167
35 설문응답 유효성 검사 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-13 11620