PHPでBootstrapモーダルに変数を表示するにはどうしたらいいですか？

Question

私はformに計算を行い、データベースを入力してアラートで値を返します。 modalの場合はalertと置き換えます。

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をクリックすると、淡色のウィンドウ（モーダルの早期効果）がすぐに正常に戻ります。私はmodalが呼び出されていると信じていますが、いくつかのストレッチはエラーを出して終了します。

どうすればこの問題を解決できますか？

AJAX、コードの先頭：body

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

の

<?php 
$imc = false; 

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

終わり、それはこのことだろうか？私はこのコードを追加しようとしましたが、同じ結果を出しました。フォームを提出すると、ウィンドウが暗くなり、すぐに正常に戻ります。

---------------------------------私が欲しがるように更新しました---- ---------------------------

<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メソッド：あなたが作っ

<?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アルチュラその名などの代わりに$ _POSTの$ _POST [ 'Alturaの'] [ 'ALT']（など属性はaltです）
• ページがロードされる前に、modal.showスクリプトを開始しました。したがって、モーダルはまだ存在しないかもしれません。間違った方法で変数を印刷$(window).load(function(){})
• で包み：echo'.$imc.'は

AJAXを使用することですでもよりよいecho $imc;をされている必要があります。その後、ページを更新する必要はありません。それをやりたければ、AJAXを参照してください。 PHPの使用を避けることもできます。 @AceWebDesign Answerは、これがPHPなしでどのようにできるかをうまく説明しています。

Answer 2

これには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>