error in sending data via ajax

Question

I’m not able to send the data to mysql via ajax, I don’t know where part of my code could be wrong. My index in which categories are listed from the database via jquery.

<div class="container">

           <h1 class="restaurant-title">Peixaria</h1>


          <div id="menu-panel" class="col-sm-12 paddingselect">

                  <?php
                     categoriaas();
                  ?>

          </div>


          <div id="menu-panel-2">




          </div>



          <div id="caja-panel">
            <div class="well">


                <!-- left -->
                <div id="theproducts" class="col-sm-5">
                </div>
                <!-- left -->
                <form method="post" action="relatorio.php">
                <input type="text" id="theinputsum">

                <!-- right -->
                <div id="thetotal" class="col-sm-7">
                   <h1 id="total"></h1>
                   <button type="submit" class="btn btn-lg btn-success btn-block"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Finalizar Pedido</button>
                </form>
                </div>
                <!-- right -->


            </div>
          </div>



     </div>

the ajax code I’m trying to send to mysql.

<script>
$('#theinputsum').submit(function(event){
        event.preventDefault();
        var formDados = new FormData($(this)[0]);
$.ajax({
  method: "POST",
  url: "relatorio.php",
  data: $("#theinputsum").serialize()
})
  .done(function( retorno) {
    alert( "muito bem" );
});
};
 </script>

and the code in which it sends and lists to mysql

<?php
error_reporting(-1);
ini_set('display_errors', 'On');


//Criar a conexao
$link = new mysqli ("localhost", "root", "", "restaurant");
if($link->connect_errno){
     echo"Nossas falhas local experiência ..";
     exit();
}
$pedido = $_POST['products'];
$preco = $_POST['products'];


$sql = "INSERT INTO `pedido` (`pedido`,`preco`) VALUES ('{$pedido}','{$preco}')";

$link->query($sql);



         $sql= "SELECT id_pedido,numero_mesa,pedido_refeicao,num_refeicao,pedido_bebida,num_bebida,data FROM mpedido ORDER BY id_pedido DESC LIMIT 1";
        $consulta = mysqli_query($link,$sql);

?>

Answer 1

Your code has some problems: You’re using the "Submit" event on the wrong component. Change this line

<form method="post" action="relatorio.php">

For this

<form method="post" action="relatorio.php" id="formRel">

and this

$('#theinputsum').submit(function(event){

for this

$('#formRel').submit(function(event){

and this

data: $("#theinputsum").serialize()

for this

data: $("#formRel").serialize()

You already start sending the data to php. In the php file there is no return if all focus ok, if you want to return something to html , a good practice is to choose a return type in your ajax request like this:

$.ajax({
  method: "POST",
  url: "relatorio.php",
  data: $("#formRel").serialize(),
  dataType : "html"
})

No . done you return the content of the php page in some div for example:

.done(function( retorno) {
    alert( "muito bem" );
    $("#idDaDiv").html(retorno);
});

Finally your php file should print (can be with echo itself), the result you want to appear in the div.

More information on links http://api.jquery.com/jquery.ajax/ and http://api.jquery.com/html/