Dynamic form and send to mysql via jquery and ajax

Question

Already open some questions about it , I was helped , but kind of the way they spoke only serves 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 ajax from mysql . 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);





?>

Obs : I hope you are not upset to ask a simple question for you , but that for me is not so clear . I’ve read about ajax but all forms were normal , none were dynamic.

The image of my form

Answer 1

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

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

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

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

I already made a system similar to yours and 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 to solve your problem by selecting the data correctly via javascript and sending only what you need to the server.