Question

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

我尝试如下：
- 在代码php代码后添加了</html>;
- 添加了负责计算的变量：$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一个dims窗口（模态的早期效果）并快速恢复正常。我相信正在调用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>";
  }
?>

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

---------------------------------更新/我管理我要做的事----- --------------------------

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

您犯的错误：

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

更好的是使用AJAX。然后你不必刷新页面。如果你想这样做，请查找AJAX。你也可以避免使用PHP。 @AceWebDesign答案很好地解释了如何在没有PHP的情况下完成这项工作。

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

2 个答案: