How to view form information obtained in PHP in a Boostrap modal?

Asked

Viewed 90 times

1

I created a simple form with two fields on a page built using Bootstrap to calculate fuel consumption. The information in this form is obtained and handled using PHP. After the user clicks 'Calculate', would like the results of my PHP programming to be displayed in a modal.

<?php

$mensagem = "";

if ($_POST){

    $distancia = $_POST['distancia'];
    $mediaVeiculo = $_POST['media-veiculo'];

    if (is_numeric($distancia) && is_numeric($mediaVeiculo)){

        if ($distancia > 0 && $mediaVeiculo > 0){

            $valorGasolina = 4.80;
            $valorAlcool = 3.80;
            $valorDiesel = 3.90;

            $calculoGasolina = ($distancia / $mediaVeiculo) * $valorGasolina;
            $calculoGasolina = number_format($calculoGasolina, 2, ',','.');

            $calculoAlcool = ($distancia / $mediaVeiculo) * $valorAlcool;
            $calculoAlcool = number_format($calculoAlcool, 2, ',','.');

            $calculoDiesel = ($distancia / $mediaVeiculo) * $valorDiesel;
            $calculoDiesel = number_format($calculoDiesel, 2, ',','.');

            $mensagem.= "<div class='alert alert-success'>";
            $mensagem.= "O valor total do gasto será de:";
            $mensagem.= "<ul>";
            $mensagem.= "<li><b>Gasolina:</b> R$ ".$calculoGasolina."</li>";
            $mensagem.= "<li><b>Álcool:</b> R$ ".$calculoAlcool."</li>";
            $mensagem.= "<li><b>Diesel:</b> R$ ".$calculoDiesel."</li>";
            $mensagem.= "</ul>";
            $mensagem.= "</div>";

        } else {
            $mensagem.= "<div class='alert alert-danger'>";
            $mensagem.= "<p>Nenhum dos valores informados pode ser igual a 0</p>";
            $mensagem.= "</div>";
        }

    } else {
        $mensagem.= "<div class='alert alert-danger'>";
        $mensagem.= "<p>O valor recebido não é numérico</p>";
        $mensagem.= "</div>";
    }
}else {
    $mensagem.= "<div class='alert alert-danger'>";
    $mensagem.= "<p>Os valores de entrada não foram informados.</p>";
    $mensagem.= "</div>";    
}
?>

<!DOCTYPE html>
<html lang="pt-bt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cálculo de consume de combustível</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <h3 class="alert alert-info text-center mt-2" role="alert">Instruções</h3>
            <p class="conteudo-instrucoes">Esta aplicação tem como finalidade demonstrar os valores  que serão gastos com combustível durante uma viagem, com base no consumo do veículo e com a distância determinada por você!</p>
            <p>Os combustíveis para esse cálculo são:</p>
            <ul class="combustivel">
                <li>Álcool</li>
                <li>Gasolina</li>
                <li>Diesel</li>
            </ul>
        </div>
        <div class="col-md-6">
            <h3 class="alert alert-info text-center mt-2" role="alert">Cálculo do valor do consumo (R$)</h3>
                <form method="POST">
                    <div class="form-group">
                        <label for="distancia">Distância em quilômetro a ser percorrida</label>
                        <input type="number" class="form-control" name="distancia" id="distancia" placeholder="Distância em Km" required>
                    </div>
                    <div class="form-group">
                        <label for="media-veiculo">Consumo de combustível do veículo (Km/l)</label>
                        <input type="number" class="form-control" name="media-veiculo" id="media-veiculo" placeholder="Consumo médio (utilize vírgula como separador de casas decimais)" step="0.01" required>
                    </div>
                    <div class="form-group p-0">
                        <button class="btn btn-info" type="submit" data-toggle="modal" data-target="#modal-combustivel">Calcular</button>
                    </div>

                <div class="modal fade" id="modal-combustivel" tabindex="-1" role="dialog" aria-labelledby="TituloModalCentralizado" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Consumo do Combustível</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <p>
                                        <?php
                                        echo $mensagem;
                                        ?>
                                    </p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                                </div>
                            </div>
                        </div>
                </div>

                </form>
        </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

</body>
</html>
php bootstrap-4

1 answer

2


The button that opens the modal is the same as the Ubmit of the form. With this when you click on Calculate without filling any of the fields will open the empty modal, as the two fields have the attribute required.

And even when you submit the form by returning an HTML within the modal through the variable $mensagem, this HTML inside the modal will be fixed showing what is already there when you click on Calculate again without filling in the fields, and not the message that nothing was entered.

What you have to do is remove the button Calculate the function of opening the modal, because it is a button of Submit. Just remove from it the attributes data-toggle="modal" and data-target="#modal-combustivel" (may also withdraw the type="submit", because a button inside a form without the type is already from Submit by default), being just like this:

<button class="btn btn-info">Calcular</button>

Once this is done, the structure of if's in PHP. You need to create another if shortly after the if ($_POST){ to check that the sent values are not empty. And declare a variable $modal = false; before the if ($_POST){. This variable will serve to know if the modal will be opened after refresh from Submit. If it is false, the modal will not open if it is true you will open the modal via Javascript.

Within the if ($_POST){ you will change the variable $modal for true, indicating that the POST has been received. This will be the whole code (with the new structure of if):

<?php
$mensagem = "";
$modal = false;

if ($_POST){
   $modal = true;
    $distancia = $_POST['distancia'];
    $mediaVeiculo = $_POST['media-veiculo'];

    if (isset($distancia) && isset($mediaVeiculo)){

       if (is_numeric($distancia) && is_numeric($mediaVeiculo)){

           if ($distancia > 0 && $mediaVeiculo > 0){

               $valorGasolina = 4.80;
               $valorAlcool = 3.80;
               $valorDiesel = 3.90;

               $calculoGasolina = ($distancia / $mediaVeiculo) * $valorGasolina;
               $calculoGasolina = number_format($calculoGasolina, 2, ',','.');

               $calculoAlcool = ($distancia / $mediaVeiculo) * $valorAlcool;
               $calculoAlcool = number_format($calculoAlcool, 2, ',','.');

               $calculoDiesel = ($distancia / $mediaVeiculo) * $valorDiesel;
               $calculoDiesel = number_format($calculoDiesel, 2, ',','.');

               $mensagem.= "<div class='alert alert-success'>";
               $mensagem.= "O valor total do gasto será de:";
               $mensagem.= "<ul>";
               $mensagem.= "<li><b>Gasolina:</b> R$ ".$calculoGasolina."</li>";
               $mensagem.= "<li><b>Álcool:</b> R$ ".$calculoAlcool."</li>";
               $mensagem.= "<li><b>Diesel:</b> R$ ".$calculoDiesel."</li>";
               $mensagem.= "</ul>";
               $mensagem.= "</div>";

           } else {
               $mensagem.= "<div class='alert alert-danger'>";
               $mensagem.= "<p>Nenhum dos valores informados pode ser igual ou menor que 0</p>";
               $mensagem.= "</div>";
           }

       } else {
           $mensagem.= "<div class='alert alert-danger'>";
           $mensagem.= "<p>O valor recebido não é numérico</p>";
           $mensagem.= "</div>";
       }
   }else {
       $mensagem.= "<div class='alert alert-danger'>";
       $mensagem.= "<p>Os valores de entrada não foram informados.</p>";
       $mensagem.= "</div>";    
   }
}
?>

Now the Javascript part to open the modal:

<?php if($modal){ ?>
<script>
$(function(){
   $('#modal-combustivel').modal('show');
});
</script>
<?php } ?>

If the variable $modal for true will write the above script and open the modal after page loading.

Browser other questions tagged php bootstrap-4

You are not signed in. Login or sign up in order to post.