**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">&times;</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**

Utilizando uma requisição AJAX para este arquivo, pode não fazer muito sentido você exibir mensagens, visto que estas não chegarão à tela do usuário. Desta forma, você poderá remover os `echo` do arquivo. É importante salientar que a função de *callback* *success* somente é executada quando a resposta HTTP obtida possui o *status code* 200. Nem sempre o servidor consegue identificar corretamente e, em alguns casos, pode ocorrer do código PHP executar normalmente, mas no jQuery acusar que deu erro, pois o *status code* foi diferente de 200. Para garantir que não tenha esse problema, você pode definir manualmente o valor através da função `http_response_code`:

    if (mysql_query($sql, $con)) {
        // Cadastro realizado com sucesso:
        http_response_code(200);
    } else {
        // Erro ao realizar o cadastro:
        http_response_code(500);
    }

Se no PHP ocorrer algum erro e o cadastro não for realizado com sucesso, uma *callback* *error* no jQuery é executada.

**Explicação**

Para enviar formulário para o php sem refresh primeiro importe 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.