如何在 PHP 中的 Bootstrap 模态中显示变量？

Question

我有一个 form 进行计算，输入数据库并通过警报 returns 值。我想将此 alert 替换为 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>';
}

我试过如下：
- 在标签</html>代码后添加了php；
- 添加了负责计算的变量：$imc；
- 我将按钮 Send 链接到 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;
    }
 ?>

因此，当我单击 Send 按钮（带有所有空白字段）时，它会打开模式并将 '.$imc.' 显示为字符串。当我插入数据并单击按钮 Send 时，会变暗 window（模态的早期效果）并迅速恢复正常。我相信 modal 正在被调用，但有些伸展会导致错误并关闭。

我该如何解决这个问题？

AJAX，代码顶部：

<?php
$imc = false;

if ($_SERVER['REQUEST_METHOD'] == 'POST'){
$imc = calcularImc($_POST['altura'], $_POST['peso']);
}
?>

body

结束

<?php
  if ($imc !== false){
    echo "<script>$('#myModal').modal('show');</script>";
  }
?>

会是这个吗？我试图添加此代码，但给出了相同的结果。通过提交表单，window 变暗并迅速恢复正常。

--------------------------------更新/我设法做到了我想要的--- --------------------------

<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

您可以为此使用 jQuery。而不是

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

您可以在页面上使用它。它可能需要一些调整，因为它又快又粗糙，而且模态有点生锈。

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

Answer 2

POST方法：

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

您犯的错误：

将 altura 添加为 $_POST['altura'] 而不是 $_POST['alt']（因为它的名称属性是 alt）
您在页面加载前启动了 modal.show 脚本。所以模态可能还不存在。将其包装在 $(window).load(function(){})
以错误的方式打印变量：echo'.$imc.' 应该是 echo $imc;

更好的方法是使用 AJAX。然后你不必刷新页面。如果您想这样做，请查找 AJAX。您也可以避免使用 PHP。 @AceWebDesign Answer 很好地解释了如何在没有 PHP.

的情况下完成此操作

如何在 PHP 中的 Bootstrap 模态中显示变量？

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

html

php

twitter-bootstrap

bootstrap-modal