pass a value from mysql db to bootstrap modal - php

Question

i'm new to core php coding here i'm having doubt in calling a db value to bootstrap modal popup
<td class="bgimg"><?php echo $obj["service_name"]; ?></td>
this is a line used in my code to send "service_id" which from a table and it should be displayed in the modal popup, from there, user has to fill the text fields and it should be update to another table with the same id.
here is the code of modal popup
<div id="edit-modal" class = "modal fade" tabindex="-1" role="dialog" style="padding-top: 150px;" aria-labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel">Choose your slots</h4>
</div>
<div class="modal-body">
<p class="edit-content">service id:</p>
<form role="form1" name="loginform" method="post" class="login-form">
<div class="form-group">
<table align="center">
<tr>
<td colspan="2"><center>slot 1</center></td>
</tr>
<tr>
<td><input type="date" id="datePicker" name="slot1_dt"> </td>
<td><input type="time" name="slot1_tm"> </td>
</tr>
<tr>
<td colspan="2"><center>slot 2</center></td>
</tr>
<tr>
<td><input type="date" id="datePicker" name="slot2_dt"> </td>
<td><input type="time" name="slot2_tm"> </td>
</tr>
<tr>
<td colspan="2"><center><button type="submit" name="book" class="btn btn-default" value="book" style="font-size: 14px !important;">Book</button></center></td>
</tr>
</table>
<?php
if(isset($_REQUEST["book"]))
{
if($_REQUEST["book"])
{
$service_id=$_REQUEST["serv_id"];
$customer_id=$_REQUEST["cust_id"];
$slot1_dt=$_REQUEST["slot1_dt"];
$slot2_dt=$_REQUEST["slot2_dt"];
$slot1_tm=$_REQUEST["slot1_tm"];
$slot2_tm=$_REQUEST["slot2_tm"];
$slot1=$slot1_dt." ".$slot1_tm;
$slot1 = date("Y-m-d H:i:s",strtotime($slot1));
$slot2=$slot2_dt." ".$slot2_tm;
$slot2 = date("Y-m-d H:i:s",strtotime($slot2));
$insertqry="INSERT INTO `tblappointments`(`customer_id`, `service_id`, `preferred_slot1_date`, `preferred_slot2_date`) VALUES ('$customer_id','$service_id','$slot1','$slot2')";
mysqli_query($con, $insertqry) or die(mysqli_error($con));
}
}
?>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
it displays the result well but service_id is not passing to update it in the database
thanks in advance

Answer 1

use modal event listener,
$(document).ready(function(){
$('#edit-modal').on('show.bs.modal', function (e) {
var id = $(e.relatedTarget).attr('id');
alert(id);
$("#service_id").val(id);
});
});
and in modal in <form></form> add hidden input
<input type="hidden" id="service_id" name="serv_id" value="">
SideNote: Don't use $_REQUEST, instead use $_POST and escape the string.

Answer 2

$(document).on("click", "#upload_image", function () {
var myBookId = $(this).data('id');
$(".modal-body #activity_id___").val( myBookId );
console.log(myBookId);
// As pointed out in comments,
// it is superfluous to have to manually call the modal.
// $('#addBookDialog').modal('show');
});
<input type="hidden" name="activity_id___" id="activity_id___" value=""/>