JQuery - Представляет форму после вызова preventDefault()

Question

У меня есть форма, как показано ниже,

<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>