Dynamic form and send to mysql via jquery and ajax

Question

Dynamic form and send to mysql via jquery and ajax

Navigation

#1 by (1 votes)

2

I've already asked some questions about this, but I've been helped, but the kind of way they said it only works if the form is normal, with inputs with name "something here" my form only has an input "text" name "table "to put the table number the rest of the form comes via mysql ajax. My question is how can I pass this form to the database since it is dynamic? My code below.

My form

<div class="well">


                <!-- left -->
                <div id="theproducts" class="col-sm-5">
                </div>
                <!-- left -->
                <form method="post" action="relatorio.php" id="formRel">
                <span>Mesa</span>
         <input type="text" id="numero_mesa" name="numero_mesa">
                <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>

and the javascript code.

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

the insert query is like this.

<?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();
}
//echo "<pre>"; print_r($_POST); exit;
$mesa = $_POST['numero_mesa'];
$pedido = $_POST['products'];
$preco = $_POST['products'];


$sql = "INSERT INTO spedido ('pedido','preco','numero_mesa') VALUES ('$mesa','$pedido','$preco')";

$link->query($sql);





?>

Note: I hope you do not get upset by asking a simple question for yourself, but that for me is not so clear. I already read about ajax but all forms were normal, none were dynamic.

The image of my form

php mysql javascript jquery ajax

asked by anonymous 03.02.2017 / 18:55

1 answer

How to map the results of a store procedure with an entity using Entity Framework? How to install mORMot?

score 1 · Accepted Answer

Your problem can be solved by using the correct selector to get the value of the field you need. To get by name you can use for example:

document.querySelectorAll("input[name=nomeAqui]")

This will return an array with all the inputs with the name attribute equal to here .

You can read more about querySelectorAll here , name that is possible use other types of selectors.

I have already made a system similar to yours and I have decided to assign a class to the input, I will post a snippet below for you to understand better.

function calcular() {
  var elementValue = document.querySelector("input.mesa.ativa").value;
  document.getElementById("total").value = elementValue;
}

input.mesa.ativa {
  border-color : #F00;  
}

Mesa 1 : <input type="number" class="mesa" value=1 /><br>
Mesa 2 : <input type="number" class="mesa" value=2 /><br>
Mesa 3 : <input type="number" class="mesa" value=3 /><br>
Mesa 4 : <input type="number" class="mesa ativa" value=4 /><br>
Mesa 5 : <input type="number" class="mesa" value=5 /><br>
Mesa 6 : <input type="number" class="mesa" value=6 />

<hr>

<button onclick="calcular()">Pegar valor da mesa ativa</button>
<br>
<br>

Valor da mesa ativa: <input type="number" id="total" />

With this you can have a basis for solving your problem by selecting the data correctly via javascript and sending only what you need to the server.