Olá, estou criando uma página de orçamento em meu site e criei uma tabela em JavaScript em que o cliente clica em adicionar produto e mais linhas da mesma tabela vão sendo adicionadas... Da mesma forma, se ele clicar em remover produto a linha é removida. Isso está funcionando perfeitamente, o problema é que preciso enviar para a página que irá processar o formulário e enviar para o email justamente a quantidade de linha e seus respectivos valores finais. Como faço isso? Abaixo segue o código da função JavaScript, e a FORM do HTML.
Função createtable
que cria a tabela:
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" >    <input type="reset" name="limpar" value="Cancelar e redefinir">
</form>