How do I retrieve and send form information created by email?

1
Hello, I'm creating a budget page on my website and I've created a table in JavaScript where the customer clicks add product and more rows from the same table are being added ... Likewise, if he clicks 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 their respective final values. How do I do that? Below is the code for 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><formmethod="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>
    
asked by anonymous 17.01.2018 / 11:50

1 answer

0

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

When you are creating the table:

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

When you retrieve 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><formmethod="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>
    
17.01.2018 / 13:31