Как опубликовать данные в ajax из bootstrap modal?

Question

У меня проблема в bootstrap modal. Я хочу добавить заголовок изображения с использованием модели bootstrap.

Для модальной секции я сделал это,

<!-- 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">&times;</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> 
      <a href="#" class="btn" data-dismiss="modal">Close</a> 
      </div> 
     </div> 
    </div> 
    </div> 
</form> 
<!-- Modal End Here --> 

Для АЯКС части я сделал это,

$(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"); 
     } 
    }); 
    }); 
}); 

Для process.php файла я ставлю эти строки,

<?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'; 
}?> 

Проблема заключается в том, что база данных не обновляется со значением. <?php echo $Array->image_caption;?> печатает значение из базы данных в модальном формате. Но когда я делаю это alert(postData);, он ничего не предупреждает. Может ли кто-нибудь помочь мне в том, что я делаю ошибку?

Заранее благодарим за помощь.

Answer 1

Заменить

var postData = $(this).serialize(); 

с

var postData = $("#form_id").serialize(); 

<form method="POST" id="form_id"> 
</form> 

Answer 2

Я решить вопрос, как таким образом,

Это модальный часть,

<!-- 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">&times;</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> 
      <a href="#" class="btn" data-dismiss="modal">Close</a> 
     </div> 
     </div> 
    </div> 
    </div> 
    </form> 
    <!-- Modal End Here --> 

Это Аякса часть ,

<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> 

И PHP часть, как это,

<?php include('require/admin_header.php'); 
if (isset($_REQUEST['caption'])) { 
$caption=$_REQUEST['caption']; 
$image_id=$_REQUEST['image_id']; 
// Update SQL 
echo 'Update Done'; 
}?> 

Спасибо за тех, кто интерес к решению вопроса. Еще раз спасибо.

Answer 3

Вы можете использовать этот код в ваш АЯКС код:

var postData = new FormData($("#form_id")[0]); 

и в вашем открытом виде тега, вы должны добавить ENCTYPE = «многослойную/form-данные», чтобы загрузить изображение.

<form method="POST" enctype="multipart/form-data" id="form_id"> 
    <input></input> 
</form>