ajax-jQueryを使用してリモートモーダルフォームを提出する方法

Question

これは、モーダルで静的フォーム値を使用してフォームを送信する方法とは少し異なります。 AJAXは表示されているモーダルからフォームの値を送信しないため、同じメソッドを使用しても機能しません。だから、

HTML

<a href="remote_form.html" data-toggle="modal" data-target="#xModal">load form</a> 

モーダル

<div class="modal fade" id="xModal" tabindex="-1" role="dialog"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h4 class="modal-title" id="xModalLabel">loading...</h4> 
      </div> 
      <div class="modal-body">...</div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-link waves-effect">SAVE CHANGES</button> 
       <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">CLOSE</button> 
      </div> 
     </div> 
    </div> 
</div> 

jqueryの

//clear modal 
$('body').on('hidden.bs.modal', '.modal', function() { 
    $(this).removeData('bs.modal'); 
}); 

//submit form 
$('#xModal').on('shown.bs.modal',function (e) { 
    e.preventDefault(); 
    var form=$(this).find('form').serialize(); 
    $('#save_btn').on('click',function(){ 
     $.ajax({ 
      url:'inc/data.php', 
      type:'POST', 
      data:form, 
      success : function(data){ 
       console.log(data); 
      } 
     }); 
    }); 
}); 

ダta.php

<? 
print_r($_POST); 
?> 

remote_form.html

<div class="modal-content"> 
    <div class="modal-header"> 
     <h4 class="modal-title" id="xModalLabel">Reg Form</h4> 
    </div> 
    <div class="modal-body"> 
    <form> 
     <input type="text" name="fname" /><br /> 
     <input type="text" name="lname" /><br /> 
     <input type="text" name="email" /> 
    </form> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-link waves-effect" id="save_btn">SAVE</button> 

    </div> 
</div> 

おかげで、任意のコメントは大歓迎です！

Answer 1

idsを入力フィールドに設定し、そのIDから次のようにデータを取得することができます。

<input type="text" name="fname" id="fname"/> 

とスクリプトでこれを行う。あなたは、保存をクリックしたとき

//submit form 
$('#xModal').on('shown.bs.modal',function (e) { 
    e.preventDefault(); 
    $('#save_btn').on('click',function(){ 
    var fname = $("#fname"); 
     $.ajax({ 
      url:'inc/data.php', 
      type:'POST', 
      data:{ 
       fname = fname 
      }, 
      success : function(data){ 
       console.log(data); 
      } 
     }); 
    }); 
}); 

Answer 2

委任あなたのクリックイベント、あなたは何を得るか、on('shown.bs.modal')イベント

$(document).on('click', '#save_btn',function(){ 
    var form=$(this).closest('form').serialize(); 
    $.ajax({ 
     url:'inc/data.php', 
     type:'POST', 
     data:form, 
     success : function(data){ 
      console.log(data); 
     } 
    }); 
});