load a specific form according to the selected radio button

Asked

Viewed 1,539 times

2

Assuming I have two options at the beginning of a form, option A and option 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>

Assuming I select option A, I want you to load form A, theoretically form A would be like this:

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

And therefore if I select option B, the form for B will be loaded:

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

  • What happens that passes for <form> for <form A> or <form B>?

  • You want to give an :checked input to form #A to appear and the same in #B?

  • That’s right @haykou

  • Sorry @brasofilo, but I didn’t understand your comment.

  • Misunderstanding my, please discard previous comment.

2 answers

2


The simplest way to do this would be:

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();
    }
});

So, as you make a change on Button Radio, the JS will check if the first this "Checked", if yes, it shows the first and disappears with the second, if it is not the first, it will do the same with the second Radio, only reversing who shows.

If you need to add more forms, you can specify in some other IF, or if not, you can capture the elements by Class, check which one was selected, and return the ID to know which form should be exposed.

Practical Example: JSFIDDLE

  • Simple and practical! Very Good!

1

Create a file for each form, and load the selected:

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>

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.