0

Tenho um form que faz um cálculo, insere no banco e retorna o valor através de um alert.

Gostaria de substituir ess mensagem de alert por um modal.

HTML

<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>

PHP

function calcularIMC($altura,$peso){
 $imc = 0;
   if($altura >0 && $peso >0){
     $imc = $peso / ($altura * $altura);
   }

 echo '<script>';
 echo 'alert("'.$imc.'");';
 echo '</script>';
}

Tentei fazer da seguinte maneira: - Adicionei o código php depois da tag </html>; - Adicionei a váriável responsável pelo cálculo: $imc; - Linkei o botão de Enviar com o 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-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
           <?php echo'.$imc.';?>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</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;
    }
 ?>

Com isso, quando eu clico no botão Enviar (com todos os campos vazios), ele abre o modal e exibe o '.$imc.' como String. Quando eu insiro os dados e clico no botão Enviara janela fica opaca (início do efeito do modal) e rapidamente volta ao normal. Creio que o modal esteja sendo chamado, mas em algum trecho ele buga e fecha.

Como posso resolver isso?

3
  • 1
    Uma pequena pergunta antes... Porquê você está usando esse tanto de echo? Realmente acha necessário? Commented 19/04/2016 às 14:58
  • @LucasHenrique, não. Estava fazendo de uma forma errada. Realizei algumas mudanças no código, veja a pergunta novamente por favor :)
    – GtGtGt
    Commented 19/04/2016 às 15:06
  • Você está usando algum framework pra construir sua solução ou está fazendo em "php cru" mesmo? porque pela minha experiência com PHP e com web, ou você monta isso no JS ou já entrega o resultado como uma view... Commented 12/12/2018 às 10:24

3 Respostas 3

1

Aspas simples não aceitam variáveis:

 <?php echo'.$imc.';?>

Você fez confusão por causa disto:

 echo 'alert("'.$imc.'");';

Na verdade aspas simples ali estão "concatenando" apenas, creio que o que você quer é isto:

<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>

<?php

function calcularIMC($altura,$peso){
 $imc = 0;
   if($altura >0 && $peso >0){
     $imc = $peso / ($altura * $altura);
   }

   return $imc;
}
?>

<!-- esta if verifica se veio do POST com isset -->
<?php if (isset($_POST['altura'], $_POST['peso'])): ?>

<?php
//Calcula IMC e adiciona a variavel
$imc = calcularIMC($_POST['altura'], $_POST['peso']);
?>

    <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-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
       <?php echo $imc;?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- encerra a IF -->
<?php endif; ?>
0




Enviar
    <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-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
       <?php
      $text=$_REQUEST['$imc'];
      echo $text;?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

1
  • Dá o mesmo resultado que o meu código rsrs. A tela esmaece (como que vai abrir o modal) e volta ao normal rapidamente :/
    – GtGtGt
    Commented 19/04/2016 às 16:11
0

testing.php:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>Example</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script>
            $(function () {
                //Comportamento do botao de envio
                $('#submit').click(function () {submit();});
                //Alteracao do comportamento do formulario de envio
                $("#form").submit(function (e) {e.preventDefault();});
            });
            //Funcao que faz o request
            function submit() {
                //Envia um request POST
                $.post(
                    $("#form").attr("action"),//Captura a action do FORM
                    $("#form").serialize(),//Captura os dados do FORM
                    //Captura a resposta do PHP
                    function (resp) {
                        //Passa a resposta pro corpo do MODAL
                        $('#modal-body').html(resp);
                        //Mostra o MODAL
                        $('#myModal').modal('show');
                    }
                );
            }
        </script>     
    </head>
    <body>
        <nav class="navbar"></nav>
        <div class="container">
            <div class="col-lg-5">
                <form action="testing.resp.php" id="form">
                    <input type="hidden" name="acao" id="acao" value="cadastrar"/>
                    <input type="text" name="altura" id="altura" value="1.75" required><br><br>
                    <input type="text" name="peso" id="peso" value="86" required><br><br>
                    <button class="btn btn-primary" type="button" id="submit">Enviar</button>
                </form>
            </div>
            <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-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">Resultado do c&aacute;lculo</h4>
                        </div>
                        <div class="modal-body alert alert-success" id="modal-body"></div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

testing.resp.php:

<?php

if($_POST['altura']){$altura = $_POST['altura'];} else {$altura = NULL;}
if($_POST['peso']){$peso = $_POST['peso'];} else {$peso = NULL;}

function calcularIMC($altura, $peso) {
    $imc = 0;
    if ($altura > 0 && $peso > 0) {
        $imc = $peso / ($altura * $altura);
    }
    return $imc;
}

# Fazer inclusao dos dados no banco aqui

echo calcularIMC($altura, $peso);

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .