Should I (and how) run a php script with modal bootstrap? - php

Question

I have created a phpscript - calculator it's here
How to optimize this short script in php - salary calc
and it is working.
Now I would like to do sth like this. A person on my web page clicks the button, the calculator opens in sth like little window, he uses calculator and when he finishes, closes the window with calculator and is on the webpage again. As I understand I should do it with bootstrap modal like this: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal_sm&stacked=h
Do I understand it right?
How should I link my phpscript with this modal?
thank You for your hints?

Answer 1

what you need is an Ajax method with modal event listener,
Modal HTML
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div id="showcal"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
B.S Modal event listener with Ajax Method
$(document).ready(function(){
$('#myModal').on('shown.bs.modal', function () {
$.ajax({
type: 'GET',
url: "calculator.php", //this file has the calculator function code
success:function(data){
$('#showcal').html(data);
}
});
});
});
and in last calculator.php
<?php
//Here comes the calculator code
?>
Lemme know if it worked and if not will make it work.