Ir para conteúdo

POWERED BY:

Arquivado

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

klonder

[Resolvido] Adicionar / remover campos dinamicamente

Por , em Javascript

Recommended Posts

raijr413    0

raijr413
Postado

Opa, beleza...

 

Pessoal, vou então demonstrar mais uma maneira de como criar campos dinamicamente, voltando ao createElement, mas agora incluindo um script em PHP para mostrar como pegar os dados:

 

Javascript + Formulário em HTML:

<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' id='campo"+qtdeCampos+"' name='campo[]' value='Campo com id: "+qtdeCampos+"'> <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="pegardados.php" method="post">
<div id="campoPai"></div>
<input type="button" value="Adicionar campos" onclick="addCampos()">
<br><br><input type="submit" value="Enviar">
</form>
</body>
</html>
Página pegardados.php:

Recuperando os valores que foram enviados pelo form:

<?php
if(isset($_POST["campo"])) {
    echo "Os campos que você adicionou são:<br><br>";
    
    // Faz loop pelo array dos campos:
    foreach($_POST["campo"] as $campo) {
        echo $campo."<br>";
    }
}else{
	echo "Você não adicionou dados em nenhum campo!";
}
?>

Olá Klonder, sei que esse post é muito antigo, mas seu código citado caiu como uma luva em um projeto que estou desenvolvendo, porém não saco nada de javascript e meu projeto basicamente é um de incluir trechos de viagem ao adicionar o campo. O problema é que preciso incluir também o estado da cidade escolhida, ou seja, quando incluo o campo ele precisa ter espaço para escrever a cidade e um combo tipo <select> para escolher a sigla do estado. Já tentei várias vezes, mas o javascript não ler a tag select que coloco no innerHtml e não tô conseguindo. Será que poderia me ajudar. Grato.

Compartilhar este post

Link para o post
Compartilhar em outros sites

diogoreducino    0

diogoreducino
Postado

Rai, no meu também tem um <select> e funcionou, dá uma olhada: 

document.getElementById("filho"+qtdeCampos).innerHTML = "<input placeholder='Código' type='text' id='codigo"+qtdeCampos+"' name='codigo[]'> <select id='descricao"+qtdeCampos+"'><option>Martelo Fosco</option><option>Parafuso Plano</option></select> <input type='button' onClick='removerCampo("+qtdeCampos+")' value='Apagar campo'>";
qtdeCampos++;
}

 

Eu sei que já faz mais de um ano que perguntou, mas esse post me ajudou muuito, então vamos contribuir!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael Nóbrega    0

Rafael Nóbrega
Postado

Boa noite pessoal, antes de mais nada gostaria de dizer que esse tópico caiu como uma luva no meu projeto, porem estou emperrado com uma questão, consegui fazer um campo de select no campo dinâmico, porem somente se eu colocar as opções no select. Gostaria de saber se existe uma maneira de fazer esse código buscar o select da tabela mysql, estou tentando mas não consigo.

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