1

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" > &nbsp&nbsp <input type="reset" name="limpar" value="Cancelar e redefinir">

	</form>

1 Resposta 1

0

Você pode criar um identificador para essas tabelas que você está criando, como uma classe chamada table_produto, por exemplo. Depois, para recuperar todas as instâncias das tabelas que você criou, você utiliza $(".table_produto"), que irá retornar um array com as tabelas e os objetos contendo as informações dos produtos.

Quando você estiver criando a tabela:

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

Quando você for recuperar as informações:

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

No seu código:

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>

1
  • Muito obrigado pela dica. Entendi partes, como por exemplo a parte de criar uma classe para a tabela. Porém confesso que ainda estou em fase de aprendizado no JavaScript e ainda estou com dificuldades para fazer com que o valor final do formulário (com as linhas inseridas e/ou removidas) seja enviado para o script PHP. Commented 17/01/2018 às 15:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .