[Resolvido] Formulário Dinâmico

[WeJr 5]

Tenho o seguinte codigo:

<script>
function maisForm(id){
document.getElementById(id).innerHTML += '<input type="text" id="data" name="data[]"><input type="text" id="hora" name="hora[]"><br>';
}
</script>
<input type="button" onclick="maisForm('div')" value="Mais campos">
<div id="div">
</div>

 

Quando clico em "Mais campos", são adicionados 2 campos (vou usar para receber datas e horas).

E quando clicar em "Mais campos", novamente, quero que os valores já digitados nos outros campos permaneçam.

Com fazer isso?

 

E como apagar o último campo criado?

O código abaixo apaga sempre os primeiros campos.

document.getElementById("data").parentNode.removeChild(document.getElementById("data"));
document.getElementById("hora").parentNode.removeChild(document.getElementById("hora"));

[Lucas Guima 164]

Tens que utilizar JS puro? Com jQuery você consegue um melhor controle sobre isso.

[William Bruno 1501]

no lugar do .innerHTML, use um appendChild, assim não irá "remover" os valores qndo você pedir para adicionar mais campos.

 

pode fazer com javascript puro sim, você também vai conseguir fazer tudo, com total controle.

Tudo oq jQuery faz, é possível fazer com javascript, afinal jquery é apenas uma lib escrita na linguagem javascript.

[WeJr 5]

Consegui! Muito Obrigado!

 

Código final:

<script>
function removerDiv(id){
document.getElementById("div"+id).parentNode.removeChild(document.getElementById("div"+id));
}
var i = 1;
function maisForm(id){
div = document.createElement("div");
div.setAttribute("id","div"+i);

div.innerHTML = 'Data: <input type="text" id="data" name="data[]"> Hora: <input type="text" id="hora" name="hora[]"><input type="button" onclick="removerDiv('+i+');" value="Remover">'

document.getElementById(id).appendChild(div);

i++;
}
</script>
<script>document.write('<input type="button" onclick="maisForm(\'div\')" value="Mais campos">');</script>
<div id="div">
<div>Data: <input type="text" id="data" name="data[]"> Hora: <input type="text" id="hora" name="hora[]"></div>
</div>

Resolvido!