Ir ao conteúdo
  • Cadastre-se
João_Custodio

HTML Formulario - opção para duplicar campos

Posts recomendados

Boa noite! 
Estou precisando inserir em meu formulario a mesma opção que nem na imagem em anexo, quando a pessoa clica no add co-produtor, os campos nome e email duplicam novamente, até 5 vezes.
ou por acaso existe alguma ferramente que cpia ou clona formularios de outros sites?
Agradeço muito se aguem conseguir me ajudar!

https://doity.com.br/2cobinf/artigos

Meu codigo esta assim no momento>

<form action="http://www.exemple.com/add.php"> 
<button> <width="10 height="10" /> + Adicionar Co-autor  </button>
<imput type="hidden" name="field_3" field id="field_3" value="lyrics" />
</form>

Capturar.PNG

Compartilhar este post


Link para o post
Compartilhar em outros sites

Com esse codigo cheguei onde queria.... no HTML puro funciona normalmente, mas quando jogo dentro de um formulario ja existente nada funciona! Alguem conseguiria ajudar???

 

 <button type="button" id="newFormButton">+ Adicionar Co-autor
    <script type="text/javascript">
        var i = 0;

        document.getElementById("newFormButton").addEventListener("click", () => {
            i++;
            testNameInput = `<input id="Nome_do_autor" name="testName[${i}]" type="text" placeholder="Nome do autor"/> <br />`;
            testAddresInput = `<input id="Nome_do_autor" name="testAddres[${i}]" type="text" placeholder="E-mail do autor"/> <br />`;
            document.getElementById("formTest").innerHTML += testNameInput + testAddresInput;
        })
    </script>
</button>


 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Preste atenção na forma correta:

var qtdCampos = 0;
function addCampo(){ //adiciona um novo campo.
	var objPai = document.getElementById("campoPai"); //campoPai é o ID do campo em HTML.
	//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);
    //escrevendo o html na página:
	document.getElementById("filho"+qtdCampos).innerHTML = "<div 'seu código HTML'></div><button onclick='removeCampo("+objPai.id+","+objFilho.id+")'></button></div>";
	qtdCampos++;
}

No seu botão adicionar Co-autor chame a função addCampo(). Nomei a div dos campos que já aparecem em html como campoPai. Também cria um botão para remover um campo caso queira.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Eletrônica

PROMOÇÃO DE QUARENTENA

Aproveite o isolamento social para aprender eletrônica!
De R$ 39,90 por apenas R$ 19,90
Só até as 23h59min desta sexta-feira 10/04/2020

CLIQUE AQUI E COMPRE AGORA MESMO!