Vários Forms na mesma página

Thiago Luna · Fevereiro 5, 2011

Olá, amigos.

Estou desenvolvendo uma loja virtual e na parte de pagamento tenho vários radios buttons, cada um com um tipo de pagamento, por exemplo:

()boleto - ()Visa - ()mastercard - ()america express ...

Gostaria que para cada opção selecionada aparecesse abaixo um form diferente, sem ter que abrir uma outra pagina com esse form para preencher os campos do cartão.

Não precisa ser necessariamente radio button. Podem ser vários botões e quando clicados cada um abre um formulário na mesma página, sem dar o refresh.

Exemplo: Clique aqui

Desde já agradeço.

Editado Fevereiro 5, 2011 por Thiago Luna

Danilo Moraes · Fevereiro 6, 2011

Olha amigo, existem "várias" maneiras de se fazer isso que tu quer, cada uma tem seus pontos fortes e fracos. Vou falar de apenas duas:

1) Requisição AJAX - Você pode carregar a página apenas com os rádio buttons e quanto o usuário clicar em um radio button, tu vai disparar uma requisição via ajax para o servidor pedindo um determinado formulário e então você "cola" ele na página.

Prós: A página a ser carregada fica bem leve, carregando apenas o necessário.

Contras: Depois da página carregada, pra cada formulário você teria que fazer mais uma requisição ao servidor. Dependendo do tempo de resposta do servidor, você pode acabar tendo que esperar mais até carregar o formulário. Sem falar que é um jeito mais complexo de resolver este problema, sendo viável apenas para o caso de se ter VÁRIOS formulários.

2) Esconder via CSS - Você pode colocar todos os formulários na mesma página, cada um dentro de um div e colocar o atributo display como none em todos eles. Quando se clica em um radio button, ele muda o display para block apenas daquele formulário.

Prós: Fácil de se fazer, a página requisita o servidor apenas uma vez.

Contra: todos os formulários estarão na página, dependendo o número de formulários, pode tornar mais demorado o carregamento da página.

Bom, visto essas duas maneiras, se estamos falando de 3 a 6 formulários ou algo perto desse número, sem sombra de dúvidas utilize a segunda opção. A primeira opção se tornaria viável caso estivéssemos falando de formulários grandes, como um vestibular on-line, diversas perguntas, diversos campos e cerca de 20 formulários por exemplo. Daí seria MUITO conteúdo sendo carregado desnecessariamente. Vou mostrar aqui como fazer a segunda opção, caso tenha optado pela primeira, avise que posto um código para ela também.

Segue:

<script type="text/javascript">

window.onload = function() {
/*
    Se você deixar este script no final da página não precisa
    colocá-lo no evento onload.
*/
    
    var formularios = document.getElementsByClassName("formularios");

    for(var i=0; i<formularios.length; i++)
        formularios[i].style.display = "none";

/*
    Até aqui, pega todos os elementos que tenham a classe
    formularios, percorre cada um deles e coloca o atributo css
    display como none.
*/


    var pagamento = document.getElementsByClassName("pagamento");

    for(var i=0; i<pagamento.length; i++)
        pagamento[i].onclick = function(event) {

/*
    Até aqui, pega todos os elementos que tenham a classe
    pagamento, percorre cada um deles e atribui para o evento
    onclick uma função. Perceba que essa função anônima, recebe
    como parâmetro a variável event.
*/

            var target;
            if (!event)
                event = window.event; //para o IE

/*
    Quando você roda esse script no IE, esse parâmetro vem
    vazio (null), por isso nós checamos se existe, ou seja, se é
    diferente de null. Caso não exista, atribuímos window.event para
    essa variável que é onde se encontram as informações sobre o
    evento no IE.
*/            
            if (event.srcElement)
                target = event.srcElement; //para o IE
            else {
                target = event.target;
                if (target.nodeType == 3) //para o Safari
                    target = target.parentNode;
            }

/*
    Este código acima é um código meio "padrão", você terá que
    usá-lo sempre que quiser acessar o elemento que disparou o
    evento. Ex: Se eu clicar em um botão e esse botão disparar
    um evento que chama essa função, para eu saber o id, value, name
    e outros atributos desse botão, vou precisar desse código acima,
    caso eu queria que o script rode em vários browsers.
    Para acessar o elemento disparador do evento no firefox, basta
    acessar event.target. MAS, no IEca você acessa por event.srcElement.
    Lembre-se que event no IE é o window.event então ficaria
    window.event.srcElement.
    Já no Safari, se o elemento que disparou o evento tem texto,
    o event.target passa a ser o texto, ou seja, um textNode.
    Então tu checa se o node selecionado é do tipo 3 (textNode), se for,
    você acessa o elemento anterior que é o disparador do evento.
    É isso que esse trecho de código faz.
*/

            
        for(var j=0; j<formularios.length; j++) {
            if(formularios[j].id != target.value)
                formularios[j].style.display = "none";
            else
                formularios[j].style.display = "block";
        }
/*
    Essa parte final é bem simples, simplesmente percorre todos os
    divs com classe formularios e compara se o id desses divs é
    igual ao valor do radio button. Se for, ele mostra esse div,
    ou seja, passa o atributo css display para block, senão esconde,
    mudando para none.
*/
    }
}
</script>

<h1>Escolha uma opção</h1>
<form>
    <input name="pagamento" class="pagamento" type="radio" value="mastercard" /> MasterCard
    <input name="pagamento" class="pagamento" type="radio" value="visa" /> Visa
    <input name="pagamento" class="pagamento" type="radio" value="boleto" /> Boleto
    <input name="pagamento" class="pagamento" type="radio" value="america_express" /> America Express
</form>


<div id="mastercard" class="formularios">
    <h1>MasterCard</h1>
    <form>
        <input type="text" />
        <input type="text" />
        <input type="text" />
        <input type="text" />
        <input type="text" />
        <input type="submit" />
        <input type="reset" />
    </form>
</div>
<div id="visa" class="formularios">
    <h1>Visa</h1>
    <form>
        <input type="button" value="botao" />
        <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="text" />
        <input type="submit" />
        <input type="reset" />
    </form>
</div>
<div id="boleto" class="formularios">
    <h1>Boleto</h1>
    <form>
        <select>
            <option>um</option>
            <option>dois</option>
            <option>tres</option>
            <option>quatro</option>
            <option>cinco</option>
        </select>
        <input type="radio" />
        <input type="radio" />
        <input type="text" />
        <input type="submit" />
        <input type="reset" />
    </form>
</div>
<div id="america_express" class="formularios">
    <h1>America Express</h1>
    <form>
        <input name="radio" type="radio" />
        <input name="radio" type="radio" />
        <input name="radio" type="radio" />
        <input type="submit" />
        <input type="reset" />
    </form>
</div>

Se você entender o código, não precisa ler os comentarios. E se não quiser entender o código, basta fazer apenas o seguinte:

coloque todos os seus formulários dentro de divs separados. Cada div deve ter um id representando o que é aquele formulário e deve ter a classe formularios.

Nos radio buttons, você coloca no atribulo value, o id do div que tu quer que apareça quando clicar. Simples assim.

Qualquer dúvida só postar.

bigo.morgantis · Agosto 31, 2015