Bootstrap modal with checkbox to not show in future - php

Question

I am trying to show a bootstrap modal on body load based on value from mysql database. I have included bootstrap modal in body and showing it successfully according to database value with:
$resultsPop = mysql_query("select popup from members where mid=" . $mid);
$pop = mysql_result($resultsPop, 0, "popup");
if($pop == 0) {
$popupval = "<script type='text/javascript'>$(window).load(function(){ $('#MyPopUp').modal('show'); });</script>";
} else {
$popupval = "";
}
echo $popupval;
And my modal code is:
<div class="modal fade" id="MyPopUp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="">
<div class="modal-dialog modal-lg">
<div class="modal-content" style="">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Welcome</h4>
</div>
<div class="modal-body" style="text-align: center;">
<span>
Welcome Popup
</span>
</div>
</div>
</div>
</div>
Now, I want to have a checkbox in the modal which on checked can silently pass value 1 and logged in member variable $mid value to a php page after user clicks on modal close button. So, popup value in members table is updated with 1 for that logged in member who do not want popup to be see again.
I have searched for such thing but couldn't successful and I am getting no idea on it.

Answer 1

Try this.
yourphpfile.php
<?php
$resultsPop = mysql_query("select popup from members where mid=" . $mid);
$pop = mysql_result($resultsPop, 0, "popup");
if($pop == 0) {
$popupval = "<script type='text/javascript'>$(window).load(function(){ $('#MyPopUp').modal('show'); });</script>";
} else {
$popupval = "";
}
echo $popupval;
$ppop = $_POST['pops'];
$username = $_POST['mids'];
//Here you can update your database with 1 where username is mids.
//On success
$output = json_encode(array('type' => 'pop'));
die($output);
//Else
$output = json_encode(array('type' => 'error'));
die($output);
?>
<script>
$(document).ready(function(){
$("#closemodal").click(function(event){
event.preventDefault();
var popups = $('#popups').val();
var user_id = $('#mids').val();
$.ajax({
type: 'post',
url: yourphpfile.php,
dataType: 'json',
data: $('#yourform').serialize(),
success: function(data)
{
if(data.type == 'pop')
{
$('#MyPopUp').modal('hide');
}
}
});
});
});
</script>
<div class="modal fade" id="MyPopUp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="">
<div class="modal-dialog modal-lg">
<div class="modal-content" style="">
<div class="modal-header">
<button type="button" class="close" id="closemodal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Welcome</h4>
</div>
<div class="modal-body" style="text-align: center;">
<span>
Welcome Popup
</span>
<form action="" id="yourform" method="POST" role="form">
<div class="checkbox">
<label><input type="checkbox" name="pops" id="popups" value="1">Pops</label>
</div>
<input type="hidden" id="mids" name="mids" value="<?php echo $_SESSION['mids']; ?>">
</form>
</div>
</div>
</div>
</div>