1

Eu criei um formulário simples com dois campos em uma página construída usando o Bootstrap para cálculo de consumo de combustível. As informações desse formulário são obtidas e tratadas usando PHP. Depois que o usuário clica em 'Calcular', gostaria que os resultados da minha programação PHP fossem exibidas em um 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>

1 Resposta 1

2

O botão que abre a modal é o mesmo que faz o submit do formulário. Com isso quando você clicar em Calcular sem preencher nenhum dos campos irá abrir a modal vazia, pois os dois campos possuem o atributo required.

E mesmo quando você submeter o formulário retornando um HTML dentro da modal através da variável $mensagem, esse HTML dentro da modal ficará fixo mostrando o que já tem lá quando você clicar em Calcular novamente sem preencher os campos, e não a mensagem de que nada foi inserido.

O que você tem que fazer é retirar do botão Calcular a função de abrir a modal, pois ele é um botão de submit. Basta retirar dele os atributos data-toggle="modal" e data-target="#modal-combustivel" (pode retirar também o type="submit", pois um button dentro de um form sem o type, já é de submit por padrão), ficando apenas assim:

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

Feito isso, é preciso alterar a estrutura dos if's no PHP. Precisa criar um outro if logo após o if ($_POST){ para verificar se os valores enviados não são vazios. E declarar uma variável $modal = false; antes do if ($_POST){. Essa variável vai servir para saber se a modal será aberta após refresh do submit. Se for false, a modal não irá abrir, se for true você irá abrir a modal via JavaScript.

Dentro do if ($_POST){ você irá alterar a variável $modal para true, indicando que o POST foi recebido. Vai ficar assim o código todo (com a nova estrutura de 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>";    
   }
}
?>

Agora a parte do JavaScript para abrir a modal:

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

Se a variável $modal for true irá escrever o script acima e abrir a modal após o carregamento da página.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .