I believe that the expected result can come with AJAX, I did not understand the doubt very well, and it does not have the modal code but I will illustrate.
In giving submit in the form you will send a ajax to receive.php and after collecting the received data will display the modal. This with Jquery:
// ao dubmeter formulário
$('#myForm').submit(function()
{
// AJAX faz requisição no script, caso nunca usou ajax, saiba
// que ele aguada um retorno do PHP, seja um echo ou algo assim
$.ajax
({
url: pagina, // script PHP
type: 'POST ou GET', // metodo (caso tenha de enviar dados ao script)
data: seus-dados, // dados a enviar, caso tenha
mimeType:"multipart/form-data", // caso for enviar arquivo
contentType: false,
cache: false,
processData:false,
success: function(data, textStatus, jqXHR)
{
// se houve sucesso ao contatar pagina php ou coletar retorno
// a variavel data é o seu retorno do PHP
// aqui você irá exibir o MODAL
},
error: function(jqXHR, textStatus, errorThrown)
{
// Em caso de erro
}
});
});
PS.: I think you can answer the question with that, but if you want an example, I can make one quickly. I’ll see if I can find an example of this in my other answers.
You can see in this question an example of ajax sending data and executing action after the form is submitted: Convert php code to reply ajax
As requested, here is a simple example, where I have a form with the message field, and when submitting this form I send the data of it to a php script, in this php I just validate the data, seeing if it has more than 3 characters, if it has more than 3 characters the typed message is returned and so it is displayed in the modal, if it has less or 3 characters, then a fault message is returned that makes an error text be displayed on the screen.
The file structure of the example is:
raiz
- index.php
- script.php
- jquery.min.js
- bootstrap/
----- css/...
----- fonts/...
----- js/...
The index php.:
<!doctype html>
<html>
<head>
<meta charset='uft-8' />
<title>Example Modal AJAX</title>
<link rel='stylesheet' href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<form class='form form-inline' id='myForm' method='post'>
<label>Message:</label>
<input name='msg' type='text' class='form-control' placeholder='Digit your message' />
<input class='btn btn-sm btn-primary' type='submit' value='Send' />
</form>
<h4 class='text-danger' id='myError'>Failure, check your message</h4>
<div id='myModal' class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title text-success">Message was received!</h4>
</div>
<div class="modal-body text-success">
<p>Your message: <span id='myMsg'></span></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src='jquery.min.js'></script>
<script src='bootstrap/js/bootstrap.min.js'></script>
<script>
$(function()
{
$('#myError').hide();
$('#myForm').submit(function(e)
{
$.ajax
({
url: 'script.php',
type: 'POST',
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data, textStatus, jqXHR)
{
if(data != "fail")
{
$('#myMsg').text(data);
$('#myModal').modal('show');
}
else
{
$('#myError').show('slow');
}
},
error: function(jqXHR, textStatus, errorThrown)
{
}
});
e.preventDefault();
});
});
</script>
</body>
</html>
It is a simple page, where I have a form, a text message and a modal. In the script of Jquery, the error message is hidden, and when the form is submitted, send its data to my php script if the return is different from the string fail, i display my modal if I do not display my error text.
In the php script.:
<?php
if(isset($_POST['msg']) and mb_strlen($_POST['msg']) > 3)
echo $_POST['msg'];
else
echo 'fail';
I do just one validation, to check if the two paths are working.
Hello, welcome to Stack Overflow, do our Tuor to proceed in using the community. Ps.: Identando the code to edit the question and make it more presentable I realized that is missing the closing of
<div class="row">– Leonardo
You can enter the modal code?
– MagicHat