如何通過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

您可以將ID設置爲輸入字段，然後從該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); 
     } 
    }); 
});