💡 현재 상황
db까지 다녀온 코드각 review별로 아래 코드, 그림과 같이 리뷰 list를 하나씩 뿌려 주고 있음
<c:forEach var="r" items="${ list }">
<div class="commentList">
<table class="personalComment" width="100px;">
<tr class="personalCommentTitle">
<th class="commentTitle1"> ${ 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"> ${ 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>