load a specific form according to the radio button selected

Question

load a specific form according to the radio button selected

Navigation

#1 by (2 votes)
#2 by (1 votes)

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 it to load form A, in theory the form A would look 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>

html jquery

asked by anonymous 09.10.2014 / 22:30

2 answers

1

Create a file for each form , and do a load of 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>

09.10.2014 / 22:46

Bootstrap classes to create columns with space How to insert a jTabbedPane into a jPanel of another class

score 2 · Accepted Answer

The simplest way to do this would be like this:

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 in Button Radio, JS will check if the first one is "Checked", if so, it shows the first and adds with the second, if not the first one, it will do the even 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 see which form should be exposed.

Practical Example: JSFIDDLE