2

supondo que eu tenha duas opções no começo de um formulário, a opção A e a opção B

<label>SELECIONE UMA OPÇÃO</label>
<form>
  <label><input value="A" name="opcao" type="radio">opcao A</label> 
  <label><input value="B" name="opcao" type="radio">opcao B</label> 
</form>

Supondo que eu selecione a opção A, eu quero que carregue o formulário A, em tese o formulario A seria tipo assim:

<form id="A">
  <input name="A" placeholder="A opção "A" do botão radio foi selecionada"
</form>

E consequentemente se eu selecionar a opção B, o formulário referente ao B será carregado:

<form id="B">
  <input name="B" placeholder="A opção "B" do botão radio foi selecionada"
</form>
5
  • O que acontece que faz passar de <form> para <form A> ou <form B>?
    – brasofilo
    Commented 9/10/2014 às 20:39
  • Tu quer que ao dar um :checked no input A o form #A apareça e o mesmo no #B?
    – haykou
    Commented 9/10/2014 às 20:42
  • Isso ai mesmo @haykou Commented 9/10/2014 às 20:44
  • Perdão @brasofilo, mas não entendi seu cometário. Commented 9/10/2014 às 20:45
  • Mal entendido meu, por favor, descartar comentário anterior.
    – brasofilo
    Commented 9/10/2014 às 20:48

2 Respostas 2

2

A forma mais simples de se realizar esse procedimento seria assim:

HTML

<label>SELECIONE UMA OPÇÃO</label>
<form id='form-id'>
    <label><input id='form1' value="A" name="opcao" type="radio">opcao A</input></label> 
  <label><input id='form2' value="B" name="opcao" type="radio">opcao B</input></label> 
</form>
<form id="A" style="display:none;">
    <input name="A" placeholder="A opção A do botão radio foi selecionada"></input>
</form>
<form id="B" style="display:none;">
  <input name="B" placeholder="A opção B do botão radio foi selecionada"></input>
</form>

JS

$('#form-id').change(function() {
    if ($('#form1').prop('checked')) {
        $('#A').show();
        $('#B').hide();
    } else {
        $('#B').show();
        $('#A').hide();
    }
});

Sendo assim, conforme você realiza uma mudança no Button Radio, o JS vai verificar se o primeiro esta "Checked", caso sim, ele mostra o primeiro e some com o segundo, se não for o primeiro, ele vai fazer o mesmo com o segundo Radio, só que invertendo quem mostra.

Se necessário adicionar mais formulários, você pode especificar em algum outro IF, ou se não, pode capturar os elementos por Classe, verificar qual foi selecionado, e retornar o ID para saber qual formulário deve ser exposto.

Exemplo Prático: JSFIDDLE

1
  • Simples e prático! Muito Bom! Commented 9/10/2014 às 20:55
1

Crie um arquivo para cada form, e faça um load do selecionado:

index.html

<button class="carregaform" data-form="A">Formulário A</button>
<button class="carregaform" data-form="B">Formulário B</button>

<div id="formulario">

</div>

<script>
jQuery(document).ready(function($) {
   $('.carregaform').click(function(event){
     event.preventDefault();
     form = ($(this).attr('data-form') == 'A' ? 'form-A.html' : 'form-B.html');
     $('#formulario').load(form);
   });
});
</script>

form-A.html

<form id="A">
  <input name="A" placeholder="A opção 'A' do botão radio foi selecionada">
</form>

form-B.html

<form id="B">
  <input name="B" placeholder="A opção 'B' do botão radio foi selecionada">
</form>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .