How to make a modal confirmation of registration?

Question

How to make a modal confirmation of registration?

Navigation

#1 by (1 votes)

0

Good evening guys, I have a question about modal. I have an address confirmation form, however I have sent my data via bank, so alright, the problem is: I would like to know when I click on the confirm button as I do for him to return me a modal "Your request has been registered" ?

Requests.php

 <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 confirm button it redirects me and triggers the confirmation echo, I would like it to trigger the message within a modal, without displaying the bank's values how could I do that?

php mysql html

asked by anonymous 12.05.2017 / 03:42

1 answer

Undefined index php and html Domain redirection for physical server with fixed ip

score 1 · Answer 1

Order.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><scripttype="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

UsinganAJAXrequestforthisfile,itmaynotmakemuchsenseforyoutoviewmessages,astheywillnotreachtheuser'sscreen.Thisway,youcanremovetheechofromthefile.ItisimportanttopointoutthatthecallbackfunctiononlyrunswhentheHTTPresponseobtainedhasstatuscode200.TheserverisnotalwaysabletoidentifycorrectlyandinsomecasescanoccurfromthePHPcoderunnormally,butinjQueryaccuseithasfailedbecausethestatuscodewasdifferentfrom200.Toensurethatyoudonothavethisproblem,youcansetmanuallythevaluethroughthefunctionhttp_response_code:

if(mysql_query($sql,$con)){//Cadastrorealizadocomsucesso:http_response_code(200);}else{//Erroaorealizarocadastro:http_response_code(500);}

IfanerroroccursinPHPandtheregistrationisnotsuccessful,ancallbackerrorinjQueryisexecuted.

Explanation

TosendformtophpwithoutrefreshfirstimportthejQuerylib:

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

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

I've seen some tutorials (from blogs, forums and video lessons), using the onclick event of the submit button (or button), pretend, that works, and then several people go to the forums because of the problems generated by these misspelled and misspelled codes.

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

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

No success: function (data), is the callback that will be triggered, where the modal window will be called.