Luiz Santos Luiz Santos - 7 months ago 230
HTML Question

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

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

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.

Comments