How to retrieve and send information from the form created by email?

Asked

Viewed 47 times

1

Hello, I am creating a budget page on my site and created a table in Javascript where the client clicks add product and more rows of the same table are being added... Similarly, if he clicks to remove product the line is removed. This is working perfectly, the problem is that I need to send to the page that will process the form and send to the email precisely the amount of line and its respective final values. How do I do this? Below follows the code of the Javascript function, and the HTML FORM.

Function createtable that creates the table: 

	
function createtable(){
        var alvo = document.getElementById('table2');
        var table = document.createElement("TABLE");
        var linha = document.createElement("TR");
        var campo = document.createElement("TD");
        var campo2 = document.createElement("TD");
        var campo3 = document.createElement("TD");
        var campo5 = document.createElement("TD");
        var text1 = document.createElement('INPUT'); 
        var text2 = document.createElement('INPUT');
        var botao = document.createElement('INPUT'); 
        var produtos;

        produtos = document.createElement("SELECT");

        produtos.options[0] = new Option("Selecione","Selecione");
        produtos.options[1] = new Option("SPF-101","SPF-101");
		produtos.options[2] = new Option("SPF-102","SPF-102");
		produtos.options[3] = new Option("SPF-201","SPF-201");
		produtos.options[4] = new Option("SPF-202","SPF-202");
		produtos.options[5] = new Option("SPM-101","SPM-101");
		produtos.options[6] = new Option("SPM-102","SPM-102");
		produtos.options[7] = new Option("SPM-201","SPM-201");
		produtos.options[8] = new Option("SPM-202","SPM-202");
		produtos.options[9] = new Option("STT-101","STT-101");
		produtos.options[10] = new Option("STT-102","STT-102");
		produtos.options[11] = new Option("STT-201","STT-201");
		produtos.options[12] = new Option("STT-202","STT-202");
		produtos.options[13] = new Option("SB-101","SB-101");
		produtos.options[14] = new Option("SB-102","SB-102");
		produtos.setAttribute('type','button');
		produtos.setAttribute('name','select-produtos');
		produtos.setAttribute('id','select-produtos');
		produtos.setAttribute('value','produtos1');
		produtos.setAttribute ('onchange', 'checkProdutos()')

		var cor;
		cor = document.createElement("SELECT");
		cor.options[0] = new Option("Selecione","Selecione");
		cor.options[1] = new Option("Preto","Preto");
		cor.options[2] = new Option("Branco","Branco");
		cor.setAttribute('type','button');
		cor.setAttribute('name','select-Cores');
		cor.setAttribute('value','cores1');

		var Qntd;
		Qntd = document.createElement('INPUT');
		Qntd.setAttribute('type', 'number');
    Qntd.setAttribute('name', 'quantidade');
		Qntd.setAttribute('min', '1');
		Qntd.setAttribute('max', '10000');

        botao.setAttribute('type','button');
        botao.setAttribute('name','del'); 
        botao.setAttribute('id','del'); 
        botao.setAttribute('class','remover');
        botao.value="Remover produto";
       

 
   
          var tbody = document.createElement("TBODY");
          campo.innerHTML = "Produto <br>";
          campo2.innerHTML = "Cor <br>";
          campo3.innerHTML = "Quantidade <br>";
          linha.appendChild(campo);
          campo.appendChild(produtos);
          linha.appendChild(campo2);
          campo2.appendChild(cor);
          linha.appendChild(campo3);          
          campo3.appendChild(Qntd);
          linha.appendChild(campo5);
          campo5.appendChild(botao);
          tbody.appendChild(linha);
          table.appendChild(tbody);
          alvo.appendChild(table);

          $('#table2').on('click', '.remover', function () {
          $(this).closest('tr').remove();
});

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="pagina que irá processar" name="form_orcamento" id="Form-Orcamento">
		<div id="table2"><table>
			<tr><td>Produtos<br><select type="button" name="select-produtos" id="select-produtos">
				<option value="">Selecione</option>
				<option value="SPF-101">SPF-101</option>
				<option value="SPF-102">SPF-102</option>
				<option value="SPF-201">SPF-201</option>
				<option value="SPF-202">SPF-202</option>
				<option value="SPM-101">SPM-101</option>
				<option value="SPM-102">SPM-102</option>
				<option value="SPM-201">SPM-201</option>
				<option value="SPM-202">SPM-202</option>
				<option value="STT-101">STT-101</option>
				<option value="STT-102">STT-102</option>
				<option value="STT-201">STT-201</option>
				<option value="STT-202">STT-202</option>
				<option value="SB-101">SB-101</option>
				<option value="SB-102">SB-102</option>
			</select></td>
			<td>Cor<br><select type="button" name="select-cores" id="select-cores">
				<option value="">Selecione</option>
				<option value="preto">Preto</option>
				<option value="branco">Branco</option>
			</select></td>
			<td>Quantidade <br><input type="number" name="quantidade" min="1" max="10000" value="1"></td>
		</tr>
		</table><br></div>
		</fieldset>
			<input type="button" name="Adicionar Produto" value="Adicionar Produto" id="addItem" onclick="createtable()"><br><br><input type="submit" name="Enviar" value="Solicitar orçamento" > &nbsp&nbsp <input type="reset" name="limpar" value="Cancelar e redefinir">

	</form>

php javascript html5 form dinâmico

1 answer

0

You can create an identifier for these tables that you are creating, such as a class called table_produto, for example. Then, to recover all instances of the tables you created, you use $(".table_produto"), which will return an array with tables and objects containing product information.

When you are creating the table:

 table.setAttribute('class','table_produto'); //coloca um nome

When you are recovering the information:

$(".table_produto").length; //quantidade de produtos
$(".table_produto")[0]; //produto (ou tabela) numero 1
$(".table_produto")[1]; //produto (ou tabela) numero 2

In your code:

function recuperarValoresFormulario() {
    
    var produtos = $(".table_produto");
    console.log("Total de produtos: " + produtos.length);
    
}

function createtable(){
        var alvo = document.getElementById('table2');
        var table = document.createElement("TABLE");
        var linha = document.createElement("TR");
        var campo = document.createElement("TD");
        var campo2 = document.createElement("TD");
        var campo3 = document.createElement("TD");
        var campo5 = document.createElement("TD");
        var text1 = document.createElement('INPUT'); 
        var text2 = document.createElement('INPUT');
        var botao = document.createElement('INPUT'); 
        var produtos;

        produtos = document.createElement("SELECT");

        produtos.options[0] = new Option("Selecione","Selecione");
        produtos.options[1] = new Option("SPF-101","SPF-101");
		produtos.options[2] = new Option("SPF-102","SPF-102");
		produtos.options[3] = new Option("SPF-201","SPF-201");
		produtos.options[4] = new Option("SPF-202","SPF-202");
		produtos.options[5] = new Option("SPM-101","SPM-101");
		produtos.options[6] = new Option("SPM-102","SPM-102");
		produtos.options[7] = new Option("SPM-201","SPM-201");
		produtos.options[8] = new Option("SPM-202","SPM-202");
		produtos.options[9] = new Option("STT-101","STT-101");
		produtos.options[10] = new Option("STT-102","STT-102");
		produtos.options[11] = new Option("STT-201","STT-201");
		produtos.options[12] = new Option("STT-202","STT-202");
		produtos.options[13] = new Option("SB-101","SB-101");
		produtos.options[14] = new Option("SB-102","SB-102");
		produtos.setAttribute('type','button');
		produtos.setAttribute('name','select-produtos');
		produtos.setAttribute('id','select-produtos');
		produtos.setAttribute('value','produtos1');
		produtos.setAttribute ('onchange', 'checkProdutos()')

		var cor;
		cor = document.createElement("SELECT");
		cor.options[0] = new Option("Selecione","Selecione");
		cor.options[1] = new Option("Preto","Preto");
		cor.options[2] = new Option("Branco","Branco");
		cor.setAttribute('type','button');
		cor.setAttribute('name','select-Cores');
		cor.setAttribute('value','cores1');

		var Qntd;
		Qntd = document.createElement('INPUT');
		Qntd.setAttribute('type', 'number');
    Qntd.setAttribute('name', 'quantidade');
		Qntd.setAttribute('min', '1');
		Qntd.setAttribute('max', '10000');

        botao.setAttribute('type','button');
        botao.setAttribute('name','del'); 
        botao.setAttribute('id','del'); 
        botao.setAttribute('class','remover');
        botao.value="Remover produto";
       

 
   
          var tbody = document.createElement("TBODY");
          campo.innerHTML = "Produto <br>";
          campo2.innerHTML = "Cor <br>";
          campo3.innerHTML = "Quantidade <br>";
          linha.appendChild(campo);
          campo.appendChild(produtos);
          linha.appendChild(campo2);
          campo2.appendChild(cor);
          linha.appendChild(campo3);          
          campo3.appendChild(Qntd);
          linha.appendChild(campo5);
          campo5.appendChild(botao);
          tbody.appendChild(linha);
          table.appendChild(tbody);
          table.setAttribute('class','table_produto'); //coloca um nome
          alvo.appendChild(table);

          $('#table2').on('click', '.remover', function () {
          $(this).closest('tr').remove();
});

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="pagina que irá processar" name="form_orcamento" id="Form-Orcamento">
		<div id="table2"><table>
			<tr><td>Produtos<br><select type="button" name="select-produtos" id="select-produtos">
				<option value="">Selecione</option>
				<option value="SPF-101">SPF-101</option>
				<option value="SPF-102">SPF-102</option>
				<option value="SPF-201">SPF-201</option>
				<option value="SPF-202">SPF-202</option>
				<option value="SPM-101">SPM-101</option>
				<option value="SPM-102">SPM-102</option>
				<option value="SPM-201">SPM-201</option>
				<option value="SPM-202">SPM-202</option>
				<option value="STT-101">STT-101</option>
				<option value="STT-102">STT-102</option>
				<option value="STT-201">STT-201</option>
				<option value="STT-202">STT-202</option>
				<option value="SB-101">SB-101</option>
				<option value="SB-102">SB-102</option>
			</select></td>
			<td>Cor<br><select type="button" name="select-cores" id="select-cores">
				<option value="">Selecione</option>
				<option value="preto">Preto</option>
				<option value="branco">Branco</option>
			</select></td>
			<td>Quantidade <br><input type="number" name="quantidade" min="1" max="10000" value="1"></td>
		</tr>
		</table><br></div>
		</fieldset>
			<input type="button" name="Adicionar Produto" value="Adicionar Produto" id="addItem" onclick="createtable()"><br><br><input type="submit" name="Enviar" value="Solicitar orçamento" onclick="recuperarValoresFormulario()" > &nbsp&nbsp <input type="reset" name="limpar" value="Cancelar e redefinir">

	</form>

  • Thank you so much for the tip. I understood parts, for example the part of creating a class for the table. But I confess that I’m still in the learning phase in Javascript and I’m still having a hard time getting the final value of the form (with the lines inserted and/or removed) sent to the PHP script.

Browser other questions tagged php javascript html5 form dinâmico

You are not signed in. Login or sign up in order to post.