How can I show a variable in Bootstrap modal in PHP? - php

Question

I have a form that makes a calculation, enter the database and returns the value through an alert.
I would like to replace this alert for modal.
HTML
<form method="post" action="#">
<input type="text" name="alt" id="altura" required><br><br>
<input type="text" name="peso" id="peso" required><br><br>
<button type="submit" id="Send">Send</button>
</form>
PHP
function calcularIMC($altura,$peso){
$imc = 0;
if($altura >0 && $peso >0){
$imc = $peso / ($altura * $altura);
}
echo '<script>';
echo 'alert("'.$imc.'");';
echo '</script>';
}
I tried as follows:
- Added the php after the tag </html> code;
- Added the variable responsible for the calculation: $imc;
- I linked the button Send with modal.
<form method="post" action="#">
<input type="hidden" name="acao" id="acao" value="cadastrar"/>
<input type="text" name="alt" id="altura" required><br><br>
<input type="text" name="peso" id="peso" required><br><br>
<button type="submit" id="Enviar" data-toggle="modal" data-target="#myModal">Enviar</button>
</form>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<?php echo'.$imc.';?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
PHP
<?php
function calcularIMC($altura,$peso){
$imc = 0;
if($altura >0 && $peso >0){
$imc = $peso / ($altura * $altura);
}
return $imc;
}
?>
Thus, when I click on Send button (with all the empty fields), it opens the modal and displays the '.$imc.' as String.
When I insert the data and click on the button Send a dims window (early effect of modal) and quickly back to normal. I believe the modal is being called, but some stretch it gives erros and closes.
How can I solve this?
AJAX, top of code:
<?php
$imc = false;
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
$imc = calcularImc($_POST['altura'], $_POST['peso']);
}
?>
End of body
<?php
if ($imc !== false){
echo "<script>$('#myModal').modal('show');</script>";
}
?>
Would it be this? I tried to add this code, but gave the same result. By submitting the form, the window dims and quickly back to normal.
---------------------------------UPDATED / I MANAGED TO DO THAT I WANTED-------------------------------
<form method="post" action="#">
<input type="text" name="alt" id="altura" required><br><br>
<input type="text" name="peso" id="peso" required><br><br>
<button type="submit" id="Send" data-toggle="modal" data-target="#myModal">Send</button>
</form>
<?php
$imc = false;
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
$imc = calcularImc($_POST['altura'], $_POST['peso']);
}
?>
<?php
if ($imc !== false){
echo '<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>';
echo '<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>';
echo "<script>$('#myModal').modal('show');</script>";
}
?>
</body>
</html>
function calcularIMC($altura,$peso){
$imc = 0;
if($altura >0 && $peso >0){
$imc = $peso / ($altura * $altura);
}
echo '<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">';
echo $imc; // RESULT OF CALC MODAL INSIDE
echo '</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>';
}
?>

Answer 1

POST Method:
<?php
function calcularIMC($altura,$peso){
$imc = 0;
if($altura >0 && $peso >0){
$imc = $peso / ($altura * $altura);
}
return $imc;
}
$imc = "";
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
$imc = calcularImc($_POST['alt'], $_POST['peso']);
?>
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
<?php
}
?>
<form method="post" action="#">
<input type="hidden" name="acao" id="acao" value="cadastrar"/>
<input type="text" name="alt" id="altura" required><br><br>
<input type="text" name="peso" id="peso" required><br><br>
<button type="submit" id="Send">Send</button>
</form>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<?php echo $imc;?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Errors you made:
Addres altura as $_POST['altura'] instead of $_POST['alt'] (as its name attribute is alt)
You started your modal.show script before the page was loaded. So the modal might not exist yet. Wrap it in $(window).load(function(){})
Printed the variable in the wrong way: echo'.$imc.' should have been echo $imc;
Even nicer would be to use AJAX. Then you don't have to refresh the page. If you want to do that, lookup AJAX. You could also avoid using PHP. #AceWebDesign Answer explains nicely how this can be done without PHP.

Answer 2

You could use jQuery for this.
instead of
echo '<script>';
echo 'alert("'.$imc.'");';
echo '</script>';
You could use this on the page. It may need some tweaking as it was quick and rough, and the modal was a little rusty.
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<form method="post" action="#">
<input type="hidden" name="acao" id="acao" value="cadastrar"/>
<input type="text" name="alt" id="altura" required><br><br>
<input type="text" name="peso" id="peso" required><br><br>
<button type="submit" id="Enviar" data-toggle="modal" data-target="#myModal">Enviar</button>
</form>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(document).off("click", ".btn-default").on( "click", ".btn-default", function(e) {
var altura = $('#altura').val();
var peso = $('#peso').val();
var imc =0;
if (altura > 0 )
{
var imc = peso / (altura * altura);
}
$(".modal-body").html(imc);
$('#myModal').modal('show');
});
return false;
});
</script>
</body>
</html>