I think the expected result can come with AJAX, I did not understand the question very well, and it does not have the modal code, but I'll give an example.
By giving submit in the form you will send ajax to the 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 with this you can answer the question, but if you want an example I can work out a quick one. I'll see if I can find an example of this in my other responses.
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 to ajax
As requested, here is a simple example, where I have a form with the message field, and when submitting this form I send his data to a php script, in that php I just validate the data, seeing if it has more than 3 characters, if it is longer than 3 characters, the message entered is returned so that it is displayed in the modal if it is less than or 3 characters long, then a failure message is returned that causes an error text to be displayed on the screen. / p>
The sample file structure 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's a simple page, where I have a form, a text message and a modal. In the JQuery script, the error message is hidden, and when the form is submitted, I 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.
No script.php :
<?php
if(isset($_POST['msg']) and mb_strlen($_POST['msg']) > 3)
echo $_POST['msg'];
else
echo 'fail';
I only do one validation to verify that both paths are working.
