Pick up input values

Question

Hello, I would like to know how to get the information of each input of my form, are inputs in html and other generated in Javascript, I want to send the information by backend PHP to another page.

Code: Requests

<form method="POST" action="Exibe_Pedidos.php?valida=TRUE">
        Receita
        <input type="text" name="receita" placeholder="Ex: Pão de queijo">
    <table border=1 id="tabela">
    <tr><td colspan="6" style="text-align: center"><label>Pedidos:</label></td></tr>
    <tr>

    <div id="codProduto">
        <td>Cód. Produto:</td> 
        <td><input type="text" name="codProduto[]" placeholder="Cód. Produto"></td>
    </div>




    <div id="quantidade">
        <td><label>Quantidade:</label></td>
        <td><input type="text" name="razao[]" placeholder="Quantidade"></td>
    </div>




    <div id="desconto">
        <td><label>Desconto:</label></td>
        <td><input type="text" name="desconto[]" placeholder="Desconto"></td>
    </div>
        </tr>

    </table>

Add Register

</form> 


<script>

const adicionar = document.getElementById("adicionar");


const codProduto = document.getElementById("codProduto");
const quantidade = document.getElementById("quantidade");
const desconto = document.getElementById("desconto");


adicionar.addEventListener("click", function (event) {
let campo = document.createElement("input");
let campoQuantidade = document.createElement("input");
let campoDesconto = document.createElement("input");

campo.name = "";
campo.name = "";
campo.placeholder = "";

campoQuantidade.placeholder = "";
campoDesconto.placeholder = "Desconto";

var table = document.getElementById("tabela");
var row = table.insertRow(2);
row.insertCell(0).innerHTML = "Cód. Produto:";
row.insertCell(1).innerHTML = `<input type="text" name="codProduto[]" placeholder="CodProduto"> `;
row.insertCell(2).innerHTML = "Quantidade";
row.insertCell(3).innerHTML = `<input type="text" name="razao[]" placeholder="Quantidade">`;
row.insertCell(4).innerHTML = "Desconto";
row.insertCell(5).innerHTML = `<input type="text" name="desconto[]" placeholder="Desconto">`;

});

</script>

Answer 1

Your code has an error in const adicionar, because it does not exist in your HTML, this should be checked.

Focusing on the doubt itself, to access the value of input just use it like this:

const codProduto = document.getElementById("codProduto").value;
const quantidade = document.getElementById("quantidade").value;
const razao = document.getElementById("razao").value;
const desconto = document.getElementById("desconto").value;
const receita = document.getElementById("receita").value;

With the value you take exactly the value of input, this after you have changed your HTML and pasted an ID for each field, with the same name you entered in the getElementById.

You can also get the amount with the onChange, where by changing the value of input, you will achieve the value within the event.target.value, where the event is a necessary parameter of the function called in onChange.

Below is an example where this can be checked. Note that I have removed the code that is in error. As it is in a <form>, the function will be called when performing a submit, that is, when pressing the key enter.

function mostrar(event) {
  console.log(event.target.value);
}

<form method="POST" action="Exibe_Pedidos.php?valida=TRUE">
        Receita
        <input type="text" id="receita" name="receita" placeholder="Ex: Pão de queijo">
    <table border=1 id="tabela">
    <tr><td colspan="6" style="text-align: center"><label>Pedidos:</label></td></tr>
    <tr>

    <div id="codProduto">
        <td>Cód. Produto:</td> 
        <td><input type="text" onchange="mostrar(event)" id="codProduto" name="codProduto[]" placeholder="Cód. Produto"></td>
    </div>




    <div id="quantidade">
        <td><label>Quantidade:</label></td>
        <td><input type="text" id="razao" name="razao[]" placeholder="Quantidade"></td>
    </div>




    <div id="desconto">
        <td><label>Desconto:</label></td>
        <td><input type="text" id="desconto" name="desconto[]" placeholder="Desconto"></td>
    </div>
        </tr>

    </table>
</form> 

Answer 2

From what I understand, you want to take these inputs in PHP, for this you can use the $_POST variable to get input values from the name. Sort of like this:

$input1 = $_POST["name_do_input"];

Remembering that the index string has to be the name, not the id. So when creating these inputs dynamically, you have to put different numbers.

Soon after creating the fields, you can name them, so:

campo.name = "campo";
campoQuantidade.name = "quantidade";
campoDesconto.name = "desconto";

And you can get the values in PHP:

$campo = $_POST["campo"];
$quantidade = $_POST["quantidade"];
$desconto = $_POST["desconto"];