form 형식일때 modal 사용하기

자바스크립트 부분이 핵심!!!

 

- 제출하기 버튼 클릭 시 모달 표시하는데 

  이때 바로 제출되지 않도록 기본 동작은 중지한다. 

 

- 모달의 확인버튼을 클릭했을때 폼이 제출되도록 한다.

  해당하는 form이 제출되도록 form id를 넣어줘야함

 

 

 

<form id="inputForm" class="input-form" th:action="@{/store/starComment}" method="post">

        내용내용 input input
        
      <button class="btn btn-primary" id="submitBtn">제출하기</button><br>

</form>



  <!-- 제출 확인 모달 -->
  <div class="modal fade" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="confirmationModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <h6 class="modal-title" id="confirmationModalLabel">제출하시겠습니까?</h6>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                  </button>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">취소</button>
                  <button type="button" class="btn btn-primary" id="confirmSubmitBtn">확인</button>
              </div>
          </div>
      </div>
  </div>



  <script>
      $(document).ready(function() {
          // 제출하기 버튼 클릭 시 모달 표시
          $('#submitBtn').click(function(e) {
              e.preventDefault(); // 기본 동작 중지

              // 모달 표시
              $('#confirmationModal').modal('show');
          });

          // 모달 확인 버튼 클릭 시 폼 제출
          $('#confirmSubmitBtn').click(function() {
              $('#inputForm').unbind('submit').submit(); // 폼 제출
          });
      });
  </script>