Formulário especial

[h-abreu]

Olá...

Bom Dia...

Gostaria de saber como construir um formulário, que inicialmente possua 5 campos iguais, ao clicar em +, ele aumentaria para 6, 7, o e assim sucessivamente.

Obrigado!

[KaKarotto]

Abreu, acho que tem bastante exemplos pelo fórum se procurar, mas como é rápido esse tipo de coisa, vou montar um exemplo aqui pra você, rapidinho:

Css:

<style>
#formulario { 
    border:1px solid red; 
    width:auto; 
    float:left; 
    padding:20px 
}
    #formulario input{ display:block; margin:10px }
    #formulario button#increase{ width:170px }                    
</style>

Html:

<form id="formulario">	
	<input type="text" />
	<input type="text" />
	<input type="text" />
	<input type="text" />
	<input type="text" />
	<button id="increase" name="increase"> + </button>
</form>

Agora a lógica do Js. Quando eu clicar no botão de id "increase", quero criar um input, de tipo "text" e coloco ele antes do último elemento do formulário, que neste caso é o botão.

window.onload = function(){
    var button = document.getElementById("increase")
    button["onclick"] = function (){
        var input = document.createElement("input")
        input.setAttribute("type", "text")                    
            this.parentNode.insertBefore( 
                input , 
                this.parentNode.lastChild.previousSibling
            )
    }
}

this.parentNode é o pai do botão (form), insertBefore é o método do pai que insere um elemento antes de algum outro. Este algum outro é o lastChild.previousSibling, lastChild é o último filho, previousSibling é o filho anterior ao último. Portanto, depois do penúltimo filho eu adiciono o novo filho, o input.

Beleza?

Aquele abraço.

[h-abreu]

vlws

vou testar