Criar um formulário html dinâmico
Tenho um formulário para criar um projecto (com campos como: nome do projecto, descrição do projecto...) e o projeto pode ter qualquer quantidade (maior ou igual a 0) de categorias.
o que eu quero é mostrar um botão que daria ao utilizador a opção de adicionar outro campo de categoria. Além disso, também gostaria que a opção de campos de categoria para ser "deleteable" pelo Usuário (se ele mudar de idéia ou fez um erro). Qual seria a melhor maneira de o fazer? Eu gostaria de uma solução Ajax tipo.
A minha solução até agora é deixar um div vazio por baixo da última categoria e um clique do botão para carregar outro campo nesse div com mais um div que será usado para o próximo div. Não estou satisfeito com esta solução, já que agora tenho que contar quantos campos tenho e dar a cada div a sua própria identificação que complica ainda mais o assunto.
Há uma solução mais simples para isto?3 answers
Se você está tentando adicionar campos dinamicamente com um botão, você pode facilmente fazê-lo fazendo algo como o seguinte:
HTML:
<form>
<p>
<label>Name:</label> <input type="text">
<label>Age:</label> <input type="text">
<span class="remove">Remove</span>
</p>
<p>
<span class="add">Add fields</span>
</p>
</form>
JS:
$(".add").click(function() {
$("form > p:first-child").clone(true).insertBefore("form > p:last-child");
return false;
});
$(".remove").click(function() {
$(this).parent().remove();
});
Não são eliminados antes da apresentação do formulário. É como uma concepção "dois passos". Mas se não precisas de um ajax verdadeiro, funciona bem. Caso contrário, você precisa de sua função de remoção JS para ligar para o servidor e dizer para apaga o campo com o seu id. Um pouco mais complexo para codificar.