How to post data in ajax from bootstrap modal? - php

Question

I have a problem in bootstrap modal. I want to add caption of an image using bootstrap model.
For the modal section I have done this,
<!-- Modal content Start-->
<form method="POST">
<!-- Modal -->
<div class="modal fade" id="myModal<?php echo $i;?>" role="dialog">
<input type="hidden" id="image_id" name="image_id" value="<?php echo $Array->image_id;?>" >
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Image Caption</h4>
</div>
<div class="modal-body">
<input type="text" id="caption" name="caption" placeholder="Caption" value="<?php echo $Array->image_caption;?>"/>
</div>
<div class="modal-footer">
<button class="btn btn-success" id="btn_caption">submit</button>
Close
</div>
</div>
</div>
</div>
</form>
<!-- Modal End Here -->
For the ajax part I have done this,
$(document).ready(function(e) {
$("button#btn_caption").click(function(){
var postData = $(this).serialize();
alert(postData);
$.ajax({
type: "POST",
url: "process.php",
data: postData,
success: function(msg){
//alert('successfully submitted')
},
error: function(){
alert("failure");
}
});
});
});
For the process.php file I put these lines,
<?php
include('require/admin_header.php');
if (isset($_POST['caption'])) {
$caption=strip_tags($_POST['caption']);
$image_id=strip_tags($_POST['image_id']);
echo '<pre>';
print_r($_POST);
// Data base update code
echo 'Update Done';
}?>
Now, the problem is the database is not updating with the value. <?php echo $Array->image_caption;?> it print the value from the database in the modal. But when I do this alert(postData);, it alert nothing. Can any one help me that where I am making the mistake?
Thanks in advance for help.

Answer 1

Replace
var postData = $(this).serialize();
with
var postData = $("#form_id").serialize();
<form method="POST" id="form_id">
</form>

Answer 2

I solve the question like this way,
This is the modal part,
<!-- Modal content Start-->
<form id="contactForm1" action="process.php">
<!-- Modal -->
<div class="modal fade" id="myModal<?php echo $i;?>" role="dialog">
<input type="hidden" id="image_id" name="image_id" value="<?php echo $Array->image_id;?>" >
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Image Caption</h4>
</div>
<div class="modal-body">
<input type="text" id="caption" name="caption" placeholder="Caption" value="<?php echo $Array->image_caption;?>"/>
</div>
<div class="modal-footer">
<button class="btn btn-success" id="btn_caption">submit</button>
Close
</div>
</div>
</div>
</div>
</form>
<!-- Modal End Here -->
This is the ajax part,
<script>
// Attach a submit handler to the form
$( "#contactForm1" ).submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $( this ),
id = $form.find( "input[name='image_id']" ).val(),
caption1 = $form.find( "input[name='caption']" ).val(),
url = $form.attr( "action" );
// Send the data using post
var posting = $.post( url, { image_id: id, caption: caption1} );
// Put the results in a div
posting.done(function( data ) {});
});
</script>
And the PHP part is like this,
<?php include('require/admin_header.php');
if (isset($_REQUEST['caption'])) {
$caption=$_REQUEST['caption'];
$image_id=$_REQUEST['image_id'];
// Update SQL
echo 'Update Done';
}?>
Thanks for those who interest to solve the question. Thanks once again.

Answer 3

You can use this code, in your ajax code:
var postData = new FormData($("#form_id")[0]);
and in your open form tag, you must add enctype="multipart/form-data" to upload image.
<form method="POST" enctype="multipart/form-data" id="form_id">
<input></input>
</form>