JQuery와는 -, 나는 다음과 같은 형태를 갖는다

Question

로 preventDefault()를 호출 한 후

<form id="compose" method="post" name="new_message"> 
<div id="new_message"> 
    <div> 
     <label class="required" for="new_message_subject">Subject</label> 
     <input type="text" class="form-control" required="required" name="new_message[subject]" id="new_message_subject"> 
    </div> 
    <div> 
     <label class="required" for="new_message_receiver">To</label> 
     <select class="form-control" name="new_message[receiver]" id="new_message_receiver"> 
      <option value="2">fnamexxxxx lname</option> 
      <option value="5">tester testerlast</option> 
      <option value="7">bummer bumlast</option> 
     </select> 
    </div> 
    <div> 
     <label class="required" for="new_message_content">Content</label> 
     <textarea class="form-control" required="required" name="new_message[content]" id="new_message_content"></textarea> 
    </div> 
    <div> 
     <button class="btn btn-primary" name="new_message[Compose]" id="new_message_Compose" type="submit">Compose</button> 
    </div> 
     <input type="hidden" name="new_message[_token]" id="new_message__token"> 
</div> 

을 양식을 제출하고 내가 양식 제출을 중단 한 preventDefault()를 사용하여 다음 확인에 부트 스트랩 모달을 사용 메시지와 당신은 아래의 내 Jquery 기능과 부트 스트랩 모달을 볼 수 있습니다.

<script> 
    document.getElementById("compose").addEventListener("submit", function(event){ 
     event.preventDefault(); 

     var title = $("#new_message_subject").val(); 
     var to  = $("#new_message_receiver :selected").text(); 
     var message = $("#new_message_content").val(); 

     $('#title').text(title); 
     $('#to').text(to); 
     $('#message').text(message); 

     $('#myModal').modal('show'); 

     $('#send').click(function(){ 
      // avoid preventDefault() and submit form code here 
     }); 
    }); 
</script> 
<div class="modal fade" tabindex="-1" role="dialog" id="myModal"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title">Message send confirmation</h4> 
      </div> 
      <div class="modal-body"> 
       <h4 id="title"></h4> 
       <p><b>To</b></p> 
       <p id="to"></p> 
       <p><b>Message</b></p> 
       <p id="message"></p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
       <button type="button" id="send" class="btn btn-primary">Send</button> 
      </div> 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

사용자가 양식을 제출 버튼을 클릭하면 시나리오는 다음 부트 스트랩 모달 팝업 및 양식 제출을 확인하도록 요청하고 사용자가 클릭하면 가 버튼을 보내기 id="send"은 다음 양식을 할 필요는 행동/제출.

이제는 사용자가 버튼을 양식을 제출해야 할 때 보내기를 클릭하면됩니다. 이 작업을 수행하는 몇 가지 방법을 시도했지만 preventDefault()을 피하고 양식을 제출할 수는 없습니다.

Answer 1

스크립트 코드는 다음과 같아야합니다.

<script> 
    $("#compose").submit(function (objEvent) { 
     objEvent.preventDefault(); 
     var title = $("#new_message_subject").val(); 
     var to = $("#new_message_receiver :selected").text(); 
     var message = $("#new_message_content").val(); 
     $('#title').text(title); 
     $('#to').text(to); 
     $('#message').text(message); 
     $('#myModal').modal('show'); 
     $(this)[0].submit(); 
    }) 
</script>