2016-04-19 38 views
1

我有一個form進行計算,輸入數據庫並通過警報返回值。 我想用modal代替alert如何在PHP中以Bootstrap模式顯示變量?

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;
- 我將按鈕Sendmodal聯繫起來。

<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.'爲String。 當我插入數據並點擊按鈕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>'; 
} 
?> 
+0

你在哪裏叫calcularIMC,你在哪裏設置$ imc?你的語法不正確。如果你想打印一個變量,只需使用'<?php echo $ imc; ?>' – Laurens

+0

我想在'modal'裏面調用calcularIMC。 $ imc在calcularIMC中聲明。由於我的語法錯了,我該如何解決?你能幫助我嗎? – GtGtGt

+0

您無法在已經呈現的頁面上調用php代碼。因此,如果表單已提交併且自動打開模型,您必須提交表單並在頁面上進行檢查,否則您將不得不向服務器發出AJAX請求以執行您的PHP代碼。如果您不想刷新頁面,請查找AJAX。 – Laurens

回答

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,而不是[ 'Altura的'] $ _ POST [ 'ALT'(正如其名屬性是alt)
  • 您在加載頁面之前啓動了modal.show腳本。所以模式可能還不存在。敷在$(window).load(function(){})
  • 印刷的方式是錯誤的變量:echo'.$imc.'應該已經echo $imc;

甚至更​​好的辦法是使用AJAX。然後你不必刷新頁面。如果你想這樣做,查找AJAX。你也可以避免使用PHP。 @AceWebDesign很好地解釋瞭如何在沒有PHP的情況下完成這項工作。

+0

我使用的結構與你的結構很相似,但你的回答「清除了我的想法」。謝謝! 正如我所說,我想要在'modal'中顯示答案。和以前一樣,即使所有的字段都是空白的,我也可以完美地打開'modal'。我把模態代碼放入php中並解決它。 – GtGtGt

+0

我在問題中插入代碼。看! – GtGtGt

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

該代碼有其他功能和問題代碼集成,我會用'php'做。但是,是我可以在將來使用的代碼。謝謝! – GtGtGt