동적으로 태그를 생성하고 버튼 클릭시 input 태그 생성 전송 (유용)

:
생략



<form>

<div id="savedPhotoList" class="form-group"></div>

</form>

<button type="button" class="btn btn-primary" id="modiBtn"> Modify</button> //script에서 처리하므로 form 외부 상관없음



 <script th:inline="javascript">
 
   $(document).ready(function(){
                makeSavedPhoto([[${dto.imageList}]]);
            })
 
  function makeSavedPhoto(imageList){

                var savedList = $('#savedPhotoList');

                var str = "";



                $(imageList).each(function (i,imageDTO){ //imageList는 List<ImageReviewDTO> 형태의 DTO이다

                    str+='<span data-inum="'+ imageDTO.inum +'" data-path="'+ imageDTO.path +'" data-uuid="' +imageDTO.uuid+
                        '" data-imgname="'+imageDTO.imgName+'">';
                    str+='<img id=""src="/review/getPhoto?fileName='+imageDTO.thumImgURL+'">';
                    str+='</span>';
                })
                    
                savedList.append(str);
            }
            
            
             $('#savedPhotoList').on("click", "span img", function(e) //위에서 생성한 태그에서 span 하위 img 가 클릭 됫을때 작동
             {
            
                var targetSpan = $(this).closest("span"); // 클릭된 img를 감싸고 있는 span 가져 옴.

                targetSpan.remove(); // span 자체를 지워버림
            })


			var actionForm = $("form");

            $('#modiBtn').click(function(){

                if(!confirm("수정하시겠습니까?"))
                {
                    return;
                }

                var str = "";

                $('#savedPhotoList span').each(function(i,obj){ //savedPhotoList 영역에 있는 span을 하나씩 꺼냄

                    var target = $(obj);

                    str += '<input type="hidden" name="imageList['+i+'].inum" value="'+ target.data('inum') +'">'; //위에서 태그 생성시 만든 custom 속성 data-inum 값을 가져옴
                    str += '<input type="hidden" name="imageList['+i+'].path" value="'+ target.data('path') +'">';
                    str += '<input type="hidden" name="imageList['+i+'].uuid" value="'+ target.data('uuid') +'">';
                    str += '<input type="hidden" name="imageList['+i+'].imgName" value="'+ target.data('imgname') +'">';

                })

                $('#imageInputList').html(str); //동적으로 input 태그 생성


                actionForm.attr("action", "/review/reviewModify").attr("method", "post");
                actionForm.attr("enctype", "multipart/form-data");
                actionForm.submit();



            })
 </script>
 
 
 
 생략
 :