[JavaScript & jQuery] 자바스크립트 변수에 담은 값 input type="hidden"의 value 값으로 넣기

 

 

 

💡 현재 상황

db까지 다녀온 코드각 review별로 아래 코드, 그림과 같이 리뷰 list를 하나씩 뿌려 주고 있음

<c:forEach var="r" items="${ list }">
    <div class="commentList">
        <table class="personalComment" width="100px;">
            <tr class="personalCommentTitle">
                <th class="commentTitle1">&nbsp;&nbsp;&nbsp;${ r.userNickname }</th>
                <c:if test="${ not empty loginUser }">
                    <td class="commentTitle2">
                        <input type="hidden" name="commentUserNo" id="commentUserNo" value="${ r.userNo }">
                        <input type="hidden" name="reviewNo" id="reviewNo" value="${ r.reviewNo }">
                        <input type="hidden" name="loginUserNo" id="loginUserNo" value="${ loginUser.userNo }">
                        <button type="button" id="commentReport" data-toggle="modal" data-target="#commentReportModal">신고</button>
                    </td>
                </c:if>
            </tr>
            <tr>
                <th colspan="2"><div class="personalCommentStar">★ ${ r.reviewStar } </div></th>
            </tr>
            <tr class="personalCommentContent">
                <th colspan="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${ r.reviewContent }</th>
            </tr>
        </table>
    </div>
</c:forEach>

 

 

 

 

 

💡 원하는 상황

신고 버튼을 눌렀을 때 신고 모달이 뜨는데 모달에서 다시 신고 버튼을 눌렀을 때리뷰 번호, 로그인한 사용자의 번호, 신고 사유를 컨트롤러로 넘기고 싶음

 

 

 

 

 

전제 1) 자바 코드에 name 속성이 채워져 있고, value 값이 빈 input 태그가 있을 것

👉🏻 신고 모달을 전송할 때 함께 보내 주어야 할 값이므로 신고 모달의 form 태그 안에 만들어 줘야 함을 주의할 것

 

<input type="hidden" name="이름" value="">

<div class="modal-footer">
     <button type="button" class="btn btn-secondary" data-dismiss="modal">취소</button>
     <button type="button" class="btn btn-info"  id="reportSubmitButton" onclick="reportComment();">신고</button>
     <input type="hidden" id="form_reviewNo" name="form_reviewNo" value="">
     <input type="hidden" id="form_commentUserNo" name="form_commentUserNo" value="">
     <input type="hidden" id="form_loginUserNo" name="form_loginUserNo" value="">
</div>

 

 

2-1) 자바스크립트 변수를 선언하고 기존에 이미 뽑혀 있던 값의 value를 담을 것

2-2) 제이쿼리로 전제 1에서 만든 input 태그를 집어 value 값을 넣을 것

<script>

    $("#commentContainer").on("click", "#commentReport", function() {

		// 2-1) 자바스크립트 변수를 선언하고 기존에 이미 뽑혀 있던 값의 value를 담을 것
        const reviewNo = $(this).siblings("#reviewNo").val();
        const commentUserNo = $(this).siblings("#commentUserNo").val();
        const loginUserNo = $(this).siblings("#loginUserNo").val();

        // console.log(reviewNo);
        // console.log(commentUserNo);
        // console.log(loginUserNo);

		// 2-2) 제이쿼리로 전제 1에서 만든 input 태그를 집어 value 값을 넣을 것
        // 자바스크립트로 뽑은 값을 신고 모달창의 input type="hidden"에 각각 넣어 주기 	
        $('input[name=form_reviewNo]').attr('value', reviewNo);
        $('input[name=form_commentUserNo]').attr('value', commentUserNo);
        $('input[name=form_loginUserNo]').attr('value', loginUserNo);

        // 값 뽑힘 확인
        // const a1 = $("#form_reviewNo").val();
        // const a2 = $("#form_commentUserNo").val();
        // const a3 = $("#form_loginUserNo").val();

        // console.log(a1);
        // console.log(a2);
        // console.log(a3);

    });

    // 모달창의 신고 버튼 누르면 action 따라서 url 옮겨라
    $("#reportSubmitButton").on("click", function() {

        document.getElementById("report-form").submit();

    });
</script>