Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Bruno Conte

Duplicar função

Por , em Javascript

Recommended Posts

Bruno Conte    4

Bruno Conte
Postado

Pessoal uso uma função em meu sistema onde adiciono campos em um formulario.

 

so que agora estou tentando usar essa mesma função para 2 itens.

 

pq tenho uma os que tem produtos e serviços.

 

so que quando tento criar da erro.

 

 
 
 
<html>
<head>
<script type="text/javascript">
var qtdeCampos = 0;
 
function addCampos() {
var objPai = document.getElementById("campoPai");
//Criando o elemento DIV;
var objFilho = document.createElement("div");
//Definindo atributos ao objFilho:
objFilho.setAttribute("id","filho"+qtdeCampos);
 
//Inserindo o elemento no pai:
objPai.appendChild(objFilho);
//Escrevendo algo no filho recém-criado:
document.getElementById("filho"+qtdeCampos).innerHTML = "<input type='text' name='campo[]'> <input type='button' onclick='removerCampo("+qtdeCampos+")' value='Apagar campo'>";
qtdeCampos++;
}
 
function removerCampo(id) {
var objPai = document.getElementById("campoPai");
var objFilho = document.getElementById("filho"+id);
 
//Removendo o DIV com id específico do nó-pai:
var removido = objPai.removeChild(objFilho);
}
</script>
</head>
<body>
 
<form name="form1" action="formulario.php" method="POST">
<input type="button" value="Adicionar campos" onclick="addCampos()">
<div id="campoPai"></div>
 
<br><br><input type="submit" value="Enviar">
</form>
 
</body>
</html>

não sou bom em javascript, o que eu fiz foi nomear o addCampos para addCampos1 e objPai coloquei objpai1 mudei todos, so que o segundo nao funciona.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael R Silva    27

Rafael R Silva
Postado

Seria isso?


<html>
<head>
<script type="text/javascript">
var qtdeCampos = 0;
 
function addCampos() {
var objPai = document.getElementById("campoPai");
//Criando o elemento DIV;
var objFilho = document.createElement("div");
//Definindo atributos ao objFilho:
objFilho.setAttribute("id","filho"+qtdeCampos);
 
//Inserindo o elemento no pai:
objPai.appendChild(objFilho);
//Escrevendo algo no filho recém-criado:
document.getElementById("filho"+qtdeCampos).innerHTML = "<input type='text' name='produtos[]' placeholder='produtos'><input type='text' name='servicos[]'  placeholder='serviços'> <input type='button' onclick='removerCampo("+qtdeCampos+")' value='Apagar campo'>";
qtdeCampos++;
}
 
function removerCampo(id) {
var objPai = document.getElementById("campoPai");
var objFilho = document.getElementById("filho"+id);
 
//Removendo o DIV com id específico do nó-pai:
var removido = objPai.removeChild(objFilho);
}
</script>
</head>
<body>
 
<form name="form1" action="formulario.php" method="POST">
<input type="button" value="Adicionar campos" onclick="addCampos()">
<div id="campoPai"></div>
 
<br><br><input type="submit" value="Enviar">
</form>
 
</body>
</html>

Repare que foi adicionado o novo campo na seguinte parte do código

document.getElementById("filho"+qtdeCampos).innerHTML = "<input type='text' name='produtos[]' placeholder='produtos'><input type='text' name='servicos[]'  placeholder='serviços'> <input type='button' onclick='removerCampo("+qtdeCampos+")' value='Apagar campo'>";

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito