Always when performing Submit the page will be reloaded and thus "aborting" the remaining process that would be the modal display.
Then you can submit the data without reloading the page using ajax, or let the page be reloaded and filling modal using php+js or even writing entire modal with php.
I particularly prefer ajax in this scenario, I’ll put a very simple example and the adaptation as well as improvement stays with you, it would be something close to that:
jQuery $.ajax https://api.jquery.com/jquery.ajax/
Bootstrap .modal("show") https://getbootstrap.com/docs/4.0/components/modal/#options
<?php
//apenas se receber um post do tipo ajax
if($_POST['ajax']) {
$js = "";
if($_POST['solicitar']) {
/* ... faz todo o processo de solicitação */
if($solicitado) $js = "modalShow('Titulo Sucesso', 'Nome = {$_POST['nome']}', 'Rodapé', 'modal-md', 'bg-success')";
else $js = "modalShow('Titulo Erro', 'Nome = {$_POST['nome']}', 'Rodapé', 'modal-sm', 'bg-danger')";
}
die($js);
}
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="content">
<div class="row">
<div class="col-sm-4">
<form id="form-submit">
<div class="form-group">
<input type="text" class="form-control" id="nome">
</div>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>
</div>
</div>
</div>
<div class="modal fade" id="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body"></div>
<div class="modal-footer justify-content-between"></div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('#form-submit').submit(function(e) {
e.preventDefault(); //evitar o comportamento padrão do submit
$.ajax({
url: '<?=$_SERVER['PHP_SELF']?>',
type: 'POST',
data: {
ajax: true,
solicitar: true,
nome: $('#nome').val()
}
})
.done(function(res) {
console.log("success");
eval(res); //executa o js da resposta
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});
});
});
function modalShow(title, body, footer, width = 'modal-md', dialogClass = 'bg-success') {
//tamanho do modal, modal-sm, modal-md, modal-lg
if(width) $('#modal .modal-dialog').addClass(width);
//bg-success ou outras classes que deseje aplicar
if(dialogClass) $('#modal .modal-content').addClass(dialogClass);
//setar o titulo
$('#modal .modal-header .modal-title').html(title);
//setar o body
$('#modal .modal-body').html(body);
//setar o footer
$('#modal .modal-footer').html(footer);
//disparar o modal
$("#modal").modal('show');
}
</script>
</body>
</html>
I advise you to make an ajax request with Ubmit and when your request returns successfully (you actually managed to save the request). dai by javascript you open the modal with the message of success. For even if you manage to open the modal and submit at the same time. it will always show the modal, even when it doesn’t work
– André Walker