Bootstrap modal остается открытым после отправки формы и обновления страницы

Question

Я hava загрузочная модальная форма, которую я использую для отправки сообщения из 4 полей. После нажатия кнопки «Отправить» я хочу показать пользователю сообщение «спасибо». Но вместо этого моя форма закрывается, и страница освежает.

Как я могу сделать для модальной формы, чтобы оставаться открытой, чтобы отобразить под кнопкой отправки сообщение.

Спасибо!

 <section class="modal-form"> 
    <!-- Modal Video first page --> 
    <div class="modal fade" id="participa-modal" tabindex="-1" role="dialog" aria-labelledby="participa-modal"> 
    <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" id="myModalLabel">Participă la un demo!</h4> 
     </div> 
     <div class="modal-body"> 
      <div class="form-group"> 
      <form id="form" method="post" class="contact" action="" enctype="multipart/form-data" data-parsley-validate> 
       <div class="row"> 
        <div class="col-md-6"> 
        <div class="form-group"> 
         <input type="text" name="homepage_firstname" id="homepage_firstname" class="form-control-contact" placeholder="Nume" required> 
        </div> 
        <div class="form-group"> 
         <input type="email" name="homepage_email" id="homepage_email" class="form-control-contact" placeholder="Email" required> 
        </div> 
        <div class="form-group"> 
         <input type="text" name="homepage_phone" id="homepage_phone" class="form-control-contact" placeholder="Telefon" data-parsley-type="number" minlength="10" maxlength="10" required> 
         <input type="hidden" name="inner_message" id="inner_message" value="Participare demo curs!"> 
        </div> 
        </div> 
        <div class="col-md-6"> 
        <div class="form-group"> 
         <textarea class="form-control-contact" name="homepage_message" id="homepage_message" placeholder="Scrisoare de intentie"></textarea> 
        </div> 
        </div> 
       </div> 
       <div class="form-actions"> 
        <input type="hidden" name="homepagesubmitted" value="TRUE" /> 
        <button type="submit" class="btn orange sign-in-btn">Înscrie-te</button> 
       </div> 
       <?php echo $homepage_send ?> 
       </form> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
    <!-- End Modal Video first page --> 
    </section> 

ОБНОВЛЕНИЕ: ОК. Так что мне удалось заставить его работать следующим кодом $(function() { var frm = $('#participa-modal'); frm.submit(function (ev) { $.ajax({ type: frm.attr('method'), url: frm.attr('action'), data: frm.serialize(), success: function (data) { alert('ok'); location.reload(); } }); ev.preventDefault(); }); });

Вопрос: как я могу заменить оповещение («ok»), чтобы указать на то, что вы в том же всплывающем окне под кнопкой SEND.

Answer 1

$(".modal-body form").submit(function(e) { 
    var url = "ActionScript.php"; // the script where you handle the form input. 
    $.ajax({ 
      type: "POST", 
      url: url, 
      data: $(this).serialize(), // serializes the form's elements. 
      success: function(data) { 
       $(this).html("Thank you!!!"); 
      } 
     }); 
    e.preventDefault(); // avoid to execute the actual submit of the form. 
}); 

проверки выше код для вашего требования

термины, используемые

$(".modal-body form") класса и форма ребенка селектор, чтобы нацеливать свои представления form

.submit(, чтобы вызвать событие на submit из ваша форма

type: "POST" для безопасного траверса данных, методом размещать

.serialize() заключается в сборе (собрать) и отправить данные проводков

success: является обратным вызовом для того, чтобы продолжить в то время как представление является успешным.