HTML Como adicionar dinamicamente novos campos?

Thays Ramos · 20 de janeiro de 2019

Olá, eu quero um formulário onde as pessoas vão poder add mais ''barras'' para ir colocando mais ''pedidos'' no meu formulário, fuçando na net achei um do jeito que eu queria mas não funciona. Queria a ajuda de vocês para saber como posso fazer ele funcionar e como eu coloco para o formulário ser enviado para um email de minha escolha.

link é esse:

<div class="col s12">

            <div class="card white">
              <div class="card-content black-text center">

                <span class="card-title flow-text"><p class="flow-text" style="font-weight: bold;">Novo Pedido</p></span>
                  
                  <br>

                  <div class="row">
                    
                    
                        <form class="col s12" action="/neworder/cadastrar" method="post">

                          <div class="row">

                                                          <div class="input-field col s12 m6 offset-m3 l4 offset-l4">
                                                        
                              <div class="select-wrapper"><input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-5ebbfaf9-5b7c-050e-3847-b4117bdbf26e"><ul id="select-options-5ebbfaf9-5b7c-050e-3847-b4117bdbf26e" class="dropdown-content select-dropdown" tabindex="0" style=""><li class="disabled" id="select-options-5ebbfaf9-5b7c-050e-3847-b4117bdbf26e0" tabindex="0"><span>Selecione o Catálogo:</span></li><li id="select-options-5ebbfaf9-5b7c-050e-3847-b4117bdbf26e1" tabindex="0" class="selected"><span>Amway</span></li><li id="select-options-5ebbfaf9-5b7c-050e-3847-b4117bdbf26e2" tabindex="0"><span>Abelha Rainha</span></li><li id="select-options-5ebbfaf9-5b7c-050e-3847-b4117bdbf26e3" tabindex="0"><span>Expressão Feminina</span></li><li id="select-options-5ebbfaf9-5b7c-050e-3847-b4117bdbf26e4" tabindex="0"><span>Hiroshima / L'Arc en Ciel</span></li><li id="select-options-5ebbfaf9-5b7c-050e-3847-b4117bdbf26e5" tabindex="0"><span>Luzon</span></li><li id="select-options-5ebbfaf9-5b7c-050e-3847-b4117bdbf26e6" tabindex="0"><span>Miro Star</span></li><li id="select-options-5ebbfaf9-5b7c-050e-3847-b4117bdbf26e7" tabindex="0"><span>Pra Você</span></li><li id="select-options-5ebbfaf9-5b7c-050e-3847-b4117bdbf26e8" tabindex="0"><span>Quatro Estações / Quintess</span></li><li id="select-options-5ebbfaf9-5b7c-050e-3847-b4117bdbf26e9" tabindex="0"><span>Toda Pop</span></li></ul><svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg><select class="validate" name="catalog_id" id="catalog_id" tabindex="-1">
                                <option value="" disabled="">Selecione o Catálogo:</option>

                                
                                                                            <option value="1">Amway</option>
                                    
                                
                                                                            <option value="2">Abelha Rainha</option>
                                    
                                
                                                                            <option value="3">Expressão Feminina</option>
                                    
                                
                                                                            <option value="4">Hiroshima / L'Arc en Ciel</option>
                                    
                                
                                                                            <option value="5">Luzon</option>
                                    
                                
                                                                            <option value="6">Miro Star</option>
                                    
                                
                                                                            <option value="7">Pra Você</option>
                                    
                                
                                                                            <option value="8">Quatro Estações / Quintess</option>
                                    
                                
                                                                            <option value="9">Toda Pop</option>
                                    
                                
                              </select></div>
                              <label>Catálogo:</label>
                            </div>

                            
                          </div>

                          <div class="row">

                            <h5 class="flow-text"><center>Itens do Pedido: </center></h5>

                            <table id="details-table" class="table">
                              <thead>
                                <tr>

                                  <th>Qtde. *</th>
                                  <th>Código *</th>
                                  <th>Descrição</th>
                                  <th>Página *</th>
                                  <th>Tamanho</th>
                                  <th>Valor Unit. (R$) *</th>
                                  <th>Total (R$)</th>
                                  <th class="actions">&nbsp;</th>

                                </tr>      
                              </thead>
                              <tbody>
                                <tr>

                                  <th><input required="" class="validate" maxlength="30" type="text" id="data_00" name="data[0][0]" value="1"></th>
                                  <th><input required="" class="validate" maxlength="7" id="data_01" name="data[0][1]"></th>
                                  <th style="width: 40%;"><input class="validate" maxlength="35" id="data_05" name="data[0][5]"></th>
                                  <th><input required="" class="validate" maxlength="3" id="data_02" name="data[0][2]"></th>
                                  <th><input class="validate" maxlength="6" id="data_03" name="data[0][3]"></th>
                                  <th><input required="" class="validate" maxlength="10" id="data_04" name="data[0][4]"></th>
                                  <th id="vtotal_item_0" style="text-align: center; width: 7%;">0,00</th>
                                  <th></th>

                                </tr>

                              <tr><th class="form-group"><input required="" class="form-control" name="data[1][0]" id="data_10" style="border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 5px; height: 2.5rem;"></th><th class="form-group"><input required="" class="form-control" name="data[1][1]" id="data_11" maxlength="7" style="border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 5px; height: 2.5rem;"></th><th class="form-group"><input class="form-control" name="data[1][5]" id="data_15" maxlength="35" style="border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 5px; height: 2.5rem;"></th><th class="form-group"><input required="" class="form-control" name="data[1][2]" id="data_12" maxlength="3" style="border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 5px; height: 2.5rem;"></th><th class="form-group"><input class="form-control" name="data[1][3]" id="data_13" maxlength="6" style="border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 5px; height: 2.5rem;"></th><th class="form-group"><input required="" class="form-control" name="data[1][4]" id="data_14" style="border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 5px; height: 2.5rem;"></th><th class="form-group" id="vtotal_item_1" style="text-align: center;"></th><td class="actions"><button title="Excluir" class="waves-effect btn-small red lighten-3 black-text" type="button" name="btn[1]" id="btn_1" style="margin-top: -10px;"><i class="material-icons">delete_forever</i></button></td></tr></tbody>    

                              <tfoot>

                                <tr>
                                  
                                  <td colspan="8" style="text-align: center;">
                                  <span><button class="waves-effect btn blue lighten-3 black-text" type="button" id="btn-add-item" onclick="addRow()">Novo Item</button></span>
                                  </td>

                                </tr>

                                <tr>
                                  <td colspan="7" style="text-align: right;">
                                    <h4 class="flow-text">
                                      <p>Total do Pedido: R$ <span class="vtotal">0,00</span></p>
                                    </h4>
                                  </td>
                                </tr>
                              </tfoot>        
                            </table>

                            <br>

                            <div class="col s12">
                              <span>
                                <button id="btn_confirmar" class="waves-effect btn green lighten-3 black-text" type="submit" onclick="return before_submit();">Confirmar Pedido</button>

                                <button type="button" class="waves-effect btn blue lighten-3 black-text" onclick="window.history.back();">Voltar</button>
                              </span>
                            </div>

                          </div>
                          
                        </form>

                      
                  </div>

              </div>
            </div>
          </div>

Para quem quiser ver como ele fica, acesse esse link: https://www.lunacatalogos.com.br/pedidos-teste/

mas os butões não funciona =/

Alguém me ajuda??

Luís Roberto C. da Silva · 20 de janeiro de 2019

O que você quer é isto: http://jsfiddle.net/8k4ooet2/

adicionado 1 minuto depois

Tem que ser com JQuery.

Thays Ramos · 21 de janeiro de 2019

Oie Luís, muito obrigada por responder, eu entendi que da para funcionar com o JQuery mas ainda não consigo fazer o codigo que eu quero funcione, mas tem um modo onde eu incorpore pelo JQuery para fazer que ele funcione?(no caso esse do post) Ou eu tenho que fazer ele funcionar na edição mesmo,mudando os codigos e tal pelo JQuery?

DHB Serviços · 21 de janeiro de 2019

Boa noite sra @Thays Ramos,
Revisando seu código fonte, existe a falta de alguns componentes como o próprio jquery.min e sim, no exemplo comentado pelo nosso colega acima pelo link, o botão "<a href="#" data-id="1" id="adicionarCampo">+ adicionar campo</a>" funciona através do comando "$(botaoAdicionar).click(function () { }" e no seu site, não encontrei qualquer menção ao código "addRow()".

Explicando: você deve criar uma function para botão-id "btn-add-item", conforme o link "http://jsfiddle.net/8k4ooet2/"

Uma sugestão: você pode copiar e colar o código do link e alterar somente o que considerar conveniente, e após fazer outros testes e ir de desenvolvendo com outras functions.

Luís Roberto C. da Silva · 22 de janeiro de 2019

@Thays Ramos Boa noite, veja esse exemplo simples que uso em meus projetos, somente em Javascript, não precisa JQuery. Analise o código e substitua de acordo com suas necessidades.

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	</head>
	<body>
		<div id="campoPai">Nome: <input pattern='[a-zA-Z.,: ]+' required title='Nome do aluno.' size='60' placeholder='Digite o seu nome sem acentuação.' type='text' class='select' name='nome[]' onkeyup="maiuscula(this)" /></div>
		<input type="button" class='botao' value="Adicionar aluno" onclick="addCampo()">
	</body>
	<script>
		var qtdCampos = 0;
		function addCampo(){ //adiciona um novo campo para o nome do aluno.
			var objPai = document.getElementById("campoPai");
			//Criando o elemento DIV;
			var objFilho = document.createElement("div");
			//Definindo atributos ao objFilho:
			objFilho.setAttribute("id","filho"+qtdCampos);
			//Inserindo o elemento no pai:
			objPai.appendChild(objFilho);
			document.getElementById("filho"+qtdCampos).innerHTML = "Nome: <input pattern='[a-zA-Z0-9á-úÁ-Úà-ùÀ-Ùâ-ûÂ-Ûã-õÃ-Õ.,: ]+' required title='Nome do aluno.' placeholder='Digite o seu nome.' type='text' class='select' name='nome[]' onkeyup='maiuscula(this)'/><input type='button' class='botao2' onclick='removeCampo("+objPai.id+","+objFilho.id+")' value='Remover'>";
			qtdCampos++;
		}
		function removeCampo(pai,id){ //remove um campo de aluno.
			var objPai = pai;
			var objFilho = id;
			//Removendo o DIV com id específico do nó-pai:
			objPai.removeChild(objFilho);
		}
	</script>
</html>

Qualquer dúvida, disponha.

Thays Ramos · 25 de janeiro de 2019

@Luís Roberto C. da Silva oi, boa noite! Desculpe a demora, beeem melhor somente em Javascript, muito obrigada... Só que eu estou tendo algumas dificuldades. Eu quero incluir mais caixas de texto, no caso eu preciso de uns 6, conseguir colocar só que na hora que clico para adicionar mais ele só cria uma caixa(e não a outras 5 que incluir) pode ser que eu esteja colocando no lugar errado, só sei o básico do super básico de html.

E também eu queria incluir um sistema de ir somando os valores na ultima caixa(assim como eu mostrei no código lá em cima).

Eu tentei pelo Jquest mas não entendi muito, nem o que o @Diego FSTI falou referente a botão adicionar. desculpe =/

e por ultimo eu não sei como colocar para ser enviado para um e-mail o formulário, se também puderem me ajudar nisso. Obrigada pela ajuda!

Luís Roberto C. da Silva · 25 de janeiro de 2019

@Thays Ramos , boa noite. Você tem que adicionar os inputs no código Javascript também. Veja esse trecho:

document.getElementById("filho"+qtdCampos).innerHTML = "Nome: <input pattern='[a-zA-Z0-9á-úÁ-Úà-ùÀ-Ùâ-ûÂ-Ûã-õÃ-Õ.,: ]+' required title='Nome do aluno.' placeholder='Digite o seu nome.' type='text' class='select' name='nome[]' onkeyup='maiuscula(this)'/><input type='button' class='botao2' onclick='removeCampo("+objPai.id+","+objFilho.id+")' value='Remover'>";

Essa linha adiciona um novo campo com as informações depois do "=", observe que é o mesmo código HTML que exibe o primeiro campo:

<div id="campoPai">Nome: <input pattern='[a-zA-Z.,: ]+' required title='Nome do aluno.' size='60' placeholder='Digite o seu nome sem acentuação.' type='text' class='select' name='nome[]' onkeyup="maiuscula(this)" /></div>

No caso, essa é a original (id="campoPai"), a qual receberá as cópias.

No caso é realmente necessário escrever o mesmo código da linha dos inputs.

Quanto ao segundo passo, vamos devagar! Resolva um passo de cada vez.

Thays Ramos · 26 de janeiro de 2019

@Luís Roberto C. da Silva oie, conseguir, realmente eu sabia que era só copiar mas não achava por onde kk só que não estou conseguindo colocar um do lado do outro, os campos ficam um em baixo do outro =/

já tentei acrescentar float='left' mas não fica.

Acrescentei o size='30' no editor ele fica no tamanho que eu coloco mas quando visualizo ele pronto não mostra nenhuma mudança de largura.

DiF · 26 de janeiro de 2019

@Thays Ramos Olá, talvez você possa resolver definindo no css o display: inline-block.

Se não funcionar pode ser que alguma regra css de um elemento esteja conflitando.

exemplo bem simples: http://jsfiddle.net/dife/1jupynLb/3/

Luís Roberto C. da Silva · 26 de janeiro de 2019

Estranho, colocando um input text depois do outro, eles aparecem lado a lado.

Copi aqui como ficou esse trecho do código Javascript.

adicionado 1 minuto depois

E confira o CSS, como instruiu o Dif.

Thays Ramos · 26 de janeiro de 2019

@Luís Roberto C. da Silva então eu só acrescentei depois do = como você falou rs

assim(em vermelho foi a parte que copiei e colei, só que mais 4 x:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body>
        <div id="campoPai">Nome: <input pattern='[a-zA-Z.,: ]+' required title='Nome do aluno.' size='60' placeholder='Digite o seu nome sem acentuação.' type='text' class='select' name='nome[]' onkeyup="maiuscula(this)" /><input pattern='[a-zA-Z.,: ]+' required title='Nome do aluno.' size='60' placeholder='Digite o seu nome sem acentuação.' type='text' class='select' name='nome[]' onkeyup="maiuscula(this)" />
        <input type="button" class='botao' value="Adicionar aluno" onclick="addCampo()">
    </body>
    <script>
        var qtdCampos = 0;
        function addCampo(){ //adiciona um novo campo para o nome do aluno.
            var objPai = document.getElementById("campoPai");
            //Criando o elemento DIV;
            var objFilho = document.createElement("div");
            //Definindo atributos ao objFilho:
            objFilho.setAttribute("id","filho"+qtdCampos);
            //Inserindo o elemento no pai:
            objPai.appendChild(objFilho);
            document.getElementById("filho"+qtdCampos).innerHTML = "Nome: <input pattern='[a-zA-Z0-9á-úÁ-Úà-ùÀ-Ùâ-ûÂ-Ûã-õÃ-Õ.,: ]+' required title='Nome do aluno.' placeholder='Digite o seu nome.' type='text' class='select' name='nome[]' onkeyup='maiuscula(this)'/><input type='button' class='botao2' onclick='removeCampo("+objPai.id+","+objFilho.id+")' value='Remover'>";
            qtdCampos++;
        }
        function removeCampo(pai,id){ //remove um campo de aluno.
            var objPai = pai;
            var objFilho = id;
            //Removendo o DIV com id específico do nó-pai:
            objPai.removeChild(objFilho);
        }
    </script>
</html>

Luís Roberto C. da Silva · 26 de janeiro de 2019

Aqui ficou lado a lado. Veja:

Mas faltou colocar o segundo input também no código javascript, onde já mencionei.

Thays Ramos · 27 de janeiro de 2019

@Luís Roberto C. da Silva estranho, eu tinha destacado na cor vermelha o que modifiquei e agora não está mais do jeito que deixei =s

enfim... eu também coloquei nos dois e o único problema mesmo é que não quer ficar lado a lado e eu reparei que o fundo do site ta pela metade do post.

Sobre o CSS que o @DiF falou eu tenho que trocar o .input{ por .campoPai{ certo? Mas não funcionou =/

Olha como fica em meu site:

Obs: O fundo rosa, não era pra ficar atras do post pelo meio e sim no fundo e não consigo de jeito nenhum colocar os campos um do lado do outro.

adicionado 7 minutos depois

@DiF obrigado pela edição(vi a mensagem depois de responde ai em cima), o fundo está no lugar certo só que os campos ainda ficam lado a lado =/

Luís Roberto C. da Silva · 27 de janeiro de 2019

Tente usar exatamente os campos da página original. Pelo que tô vendo você utiliza um framework e deve tá dando conflito no CSS. Utilize os campos na página original, adicionando apenas o código de adicionar nova linha.