Fiz uma página de teste com apenas nome e email, sem configuração nenhuma.
PedidosCLientes.php
<form id="contact_form" class="contact-form" method="post">
<ul class="row">
<li class="col-sm-12">
<label>
<input type="text" class="form-control" name="cliente_nome" id="nome" placeholder="Nome *" x-moz-errormessage="campo obrigatório" required />
</label>
</li>
<li class="col-sm-6">
<label>
<input type="text" class="form-control" name="cliente_email" id="email" placeholder="E-mail *" required x-moz-errormessage="campo obrigatório" />
</label>
</li>
<li class="col-sm-6">
<label>
<input type="text" class="form-control" name="cliente_telefone" id="telefone" placeholder="Telefone *" required x-moz-errormessage="campo obrigatório" />
</label>
</li>
<li class="col-sm-6">
<label>
<input type="text" class="form-control" name="cliente_bairro" id="bairro" placeholder="Bairro *" required x-moz-errormessage="campo obrigatório" />
</label>
</li>
<li class="col-sm-6">
<label>
<input type="text" class="form-control" name="cliente_rua" id="rua" placeholder="rua *" required x-moz-errormessage="campo obrigatório" />
</label>
</li>
<li class="col-sm-6">
<label>
<input type="text" class="form-control" name="cliente_complemento" id="complemento" placeholder="complemento *" />
</label>
</li>
</ul>
<div class="col-sm-12 text-center">
<input type="submit" id="bt-confirmar" class="btn btn-default " value="CONFIRMAR" name="confirmar" />
</div>
</form>
<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">Cliente cadastrado com sucesso</h4>
</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="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#contact_form').submit(function(){
var dados = jQuery( this ).serialize();
jQuery.ajax({
type: "POST",
url: "connectpedido.php",
data: dados,
success: function( data )
{
$('#myModal').modal('show');
}
});
return false;
});
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
connectpedido.php
Pode retirar essa linha
echo "Cliente cadastrado com sucesso!";
Explicação
Para enviar formulário para o php sem refresh primeiro import a lib jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
e dispare a função no evento onsubmit do formulário: jQuery('#contact_form').submit(function(){
Vi alguns tutoriais( de blogs, fóruns e video aulas ), usando o evento onclick do botão submit(ou button), “fingem”, que isso funciona, e depois várias pessoas vão aos fóruns, por causa dos problemas gerados por esses códigos mal escritos e incorretos.
O correto é usar no onsubmit do form, e “desativar” ele, com aquele return false;
O método .serialize(), cria a query string com os dados do formulário, e usa essa variável para enviar a função ajax.
No success: function( data ), é o callback que será disparado, onde será chamada a janela do modal.