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">×</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>