How to submit a remote modal form via ajax - jQuery - php

Question

This is a little different from the method of submitting a form via static form value in modal. Using the same method is not working because AJAX not submitting the form value from the shown modal. So,
html
load form
modal
<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);
}
});
});
});
data.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>
Thanks, any comment is welcome!

Answer 1

Delegate your click event, move the event outside the on('shown.bs.modal') event
$(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);
}
});
});

Answer 2

You can set ids to input fields and then getting data from that id as follows.
<input type="text" name="fname" id="fname"/>
and on the script do like this.
//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);
}
});
});
});