How to make a registration confirmation modal?

Question

Good evening, folks, I have a question about modal. I have an address confirmation form, but I sent my data via bank, so far so good, the problem is: I wonder when I click the button confirm how I do to return me a modal "Your order has been registered"?

Ordering.php clients.

 <form action="connectpedido.php" 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>

connectpedido.php

<?php
include_once("scripts/config.php");
include_once("scripts/funcoes.php");
?>

<?php
$objConn = new objConexao();
$conn = $objConn->fcnConn();


$nome = $_POST['cliente_nome'];
$email = $_POST['cliente_email'];
$telefone = $_POST['cliente_telefone'];
$bairro = $_POST['cliente_bairro'];
$rua = $_POST['cliente_rua'];
$complemento = $_POST['cliente_complemento'];

$sql = "INSERT INTO cliente(cliente_nome,cliente_email,cliente_telefone,cliente_bairro,cliente_rua,cliente_complemento) VALUES ";
$sql .= "('$nome', '$email', '$telefone','$bairro','$rua','$complemento')";
echo $sql;
mysql_query($sql,$conn) or die(mysql_error());
mysql_close($conn);
echo "Cliente cadastrado com sucesso!";


?>

When I press the button to confirm it redirects me and fires the confirmation echo, I would like it to fire the message inside a modal,without displaying the bank values as I could do it?

Answer 1

Ordering.php clients.

<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

Using an AJAX request for this file, it may not make much sense for you to display messages, as they will not reach the user screen. This way you can remove the echo file. It is important to point out that the function of callback Success is only executed when the obtained HTTP response has the status code 200. Not always the server can identify correctly and, in some cases, it may occur that the PHP code runs normally, but in jQuery accuse that it gave error, because the status code was different from 200. To ensure you do not have this problem, you can manually set the value through the function 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);
}

If in PHP an error occurs and the registration is not carried out successfully, a callback error in jQuery is executed.

Explanation

To send php form without refresh first import the jQuery lib:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

and trigger the function in form onsubmit event: jQuery('#contact_form').submit(function(){

I saw some tutorials( of blogs, forums and video lessons ), using the onclick event of the Ubmit button(or button), "pretend", that it works, and then several people go to the forums, because of the problems generated by these poorly written and incorrect codes.

The correct is to use the form onsubmit, and "disable" it, with that false Return;

The . serialize() method creates the query string with the form data, and uses this variable to send the ajax function.

In Success: Function( data ), it is the callback that will be fired, where the modal window will be called.