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

정보공유

[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 448건 1 페이지
번호 제목 글쓴이 날짜 조회
448 그누보드 관리자화면에 iframe 으로 띄울경우 엣지브라우저에서 튕기는 현상 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-17 1030
447 쿼리 성능 최적화 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-07 1007
446 스마트 에디터 세로 사이즈 강제로 해당 페이지에서만 늘리는 방법 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 02-28 1158
445 그누보드에 reCAPTCHA 설정하기 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-07 1313
444 mb_id 가 포함된 테이블 목록 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-22 1813
443 숫자형 input 요소 글자수 제한 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-29 2517
442 php 8.0 이상 버전에서 엑셀파일 업로드 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-18 3831
441 금액 카운팅 모션 다라라락 변화 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-26 3093
440 가장 심플한 예약 주문번호 생성 코드 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-28 3984
439 php 와 ajax 를 이용해서 파일 업로드 할때 대용량 파일을 업로드 하는 방법 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-23 4334
438 dl dt dd css 샘플 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-13 3454
437 datepicker 를 이용해서 달력3개를 표시하고 원하는 날짜만 선택이 가능하도록. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-28 3736
436 입금된 주문도 준비, 배송전까지는 취소할 수 있도록 하는 방법 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-10 4048
435 CSS를 사용하여 4x4 형태의 갤러리 디자인 그리드 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-05 3860
434 magnificPopup css 를 추가하여 popup 마다 다른 사이즈 로 띄우기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-16 4483