Libraries and Script
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="javascript">
$(document).ready(function(){
// tudo que estiver aqui poderá ser executado, após o documento ser carregado
$( "#submitBtn" ).click(function(e) {
// está função diz, que quando esse formulario for enviado, tudo oque estiver aqui será executado.
e.preventDefault(); // está função é usada pro form não ir para outra pagina, pois o evento padrão de um formulario é ir para outra pagina.
var data = $("#form").serialize(); // a function serialize serve para pegar todos os valores que foram colocados nos inputs do form
$.ajax({
// está é a função ajax, do jquery, ela será usada para fazer a requisição assícrona.
url: "models/createPedido.php", // aqui vai a url da requisição
data: data, // aqui vai os dados para o servidor, geralmente são os inputs do form
method: "POST", // aqui vai o método da requisição, acho que você já sabe sobre o get e post !
dataType: "json", // aqui será o tipo de resposta que vamos receber, será no formato json, um formato simples e mais usado.
success: function(data){
// essa é a function success, ela ira ser executada se a requisição for feita com sucesso
$("#recebe").val(data); // aqui estamos setando o valor retornado do php, no input
// a variavel data, veio do parametro da function, e será a resposta do php.
$("#myModal").modal('show');
},
error: function(){
// essa é funcion error, ela será executada caso ocorrer algum erro na requisição
$("#myModalErro").modal('show');
}
});
});
});
</script>
HTML - form and modal
<form>
......................
......................
<button name="submit" id="submitBtn">Submit</button>
</form>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Sucesso </h4>
</div>
<div class="modal-body">
<p>ID</p>
<form action="Pagina_Destino.php" method="post">
<input name='recebe' id="recebe" value="QUERO_PASSAR_O_ID_AQUI">
<button type="submit" class="btn btn-success btn-rounded waves-effect waves-light" ><span class="btn-label"><i class="fa fa-send">Enviar</i></span> </button>
<button type="button" class="btn btn-danger waves-effect waves-light" data-dismiss="modal">Fechar</button>
</form>
</div>
</div>
</div>
</div>
<div id="myModalErro" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Erro </h4>
</div>
<div class="modal-body">
<p>Erro na requisição</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger waves-effect waves-light" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
Page createPedido.php
<?php
// recebe os dados
$zzz = $_POST["zzz"];
...................
...................
//scripts para obtenção do lastInsertId
....................
//(MySQLi OO)
$valorlastInsertId = $conn->insert_id;
//(MySQLi Procedural)
$valorlastInsertId = mysqli_insert_id($conn);
//(PDO)
$valorlastInsertId = $conn->lastInsertId();
//vai ser o value do input name='recebe' id="recebe" na function success do modal id="myModal"
echo json_encode($valorlastInsertId);
?>