Logo abaixo um exemplo de inserção de campos em formulário utilizando selectbox e o famoso Jquery.
Arquivos necessários:
jquery.highlightFade.js
Estarei detalhando aqui o config.js, já que o jquery.js é o framework javascript e o jquery.highlightFade.js é um plugin.
function addFormField() {
/* pega valor inicial pelas ids dos elementos e guarda em vaiaveis */
var id = document.getElementById("id").value;
var objcat = document.getElementById("categoria");
var categoria = objcat.options[objcat.selectedIndex].text;
var objcur = document.getElementById("curso");
var curso = objcur.options[objcur.selectedIndex].text;
/*utilizando o jquery.js substitui valor em elemento com id = dicTxt
o html pode ser alterado mas deve sempre ser escrito em apenas uma linha para não gerar erros
*/
$("#divTxt").append("<p id='row" + id + "'><label>"+categoria+"<input type='hidden' name='categoria_"+id+"' value='"+id+"'/></label><label>"+curso+"<input type='hidden' name='curso_"+id+"' value='"+id+"'/></label><label><a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a></label></p>");
/*Utiliza jquery.highlightFade.js para fazer efeito em amarelo ao exibir uma linha*/
$('#row' + id).highlightFade({
speed:1000
});
id = (id - 1) + 2;
document.getElementById("id").value = id;
}
/*remove campo pela id usando jquery.js*/
function removeFormField(id) {
$(id).remove();
}
Exemplo em funcionamento e fonte:
VER EM FUNCIONAMENTO
BASE EM : http://mohamedshaiful.googlepages.com/add_remove_form.htm
Tags: Javascript, Jquery