Call a form depending on selected radio inputs

Question

I have two input fields of type radio depending on the combination of choices I want to call a different form for each case, example.

<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>
  <label><input value="C" name="opcao2" type="radio">opcao C</label> 
  <label><input value="D" name="opcao2" type="radio">opcao D</label> 
 </form>

If you select option A along with C a form appears, if you select A with D another appears, B with C other and B with D other.

I know where to start, I want to do this without having to update the page.

Answer 1

To combine all possible cases I did so:

 var a="";
  var a2="";
  var a3="";
  var z="";
  $(window).load(function(){
     $('.opcao').on('change', function() {
        a +=(this.checked ? this.value : '');     
        var n = a.length;
        if (n>2){
            a2 = a.substring(0, 1);
            a = a.substring(1, 3);
        }

        if ((a=="AB")||(a=="BA")||(a=="CD")||(a=="DC")){
            a3 =(this.checked ? this.value : '');
            a=a2+a3;
            z=(this.checked ? this.value : '');
            if (z=="A"){
               document.getElementById("opcao1").checked = true;
               document.getElementById("opcao2").checked = false;
            }else if (z=="B"){
               document.getElementById("opcao1").checked = false;
               document.getElementById("opcao2").checked = true;
            }else if (z=="C"){
               document.getElementById("opcao3").checked = true;
               document.getElementById("opcao4").checked = false;
            }else if (z=="D"){
               document.getElementById("opcao3").checked = false;
               document.getElementById("opcao4").checked = true;
            }
         }

         if ((a=="AC")||(a=="CA")){
             document.getElementById('tab1').style.display="block"; 
             document.getElementById('tab2').style.display="none";
             document.getElementById('tab3').style.display="none";
             document.getElementById('tab4').style.display="none";
         }else if ((a=="AD")||(a=="DA")){
             document.getElementById('tab1').style.display="none"; 
             document.getElementById('tab2').style.display="block";
             document.getElementById('tab3').style.display="none";
             document.getElementById('tab4').style.display="none";
         }else if ((a=="BC")||(a=="CB")){
             document.getElementById('tab1').style.display="none"; 
             document.getElementById('tab2').style.display="none";
             document.getElementById('tab3').style.display="block";
             document.getElementById('tab4').style.display="none";
         }else if ((a=="BD")||(a=="DB")){
             document.getElementById('tab1').style.display="none"; 
             document.getElementById('tab2').style.display="none";
             document.getElementById('tab3').style.display="none";
             document.getElementById('tab4').style.display="block";     
         }else{
             document.getElementById('tab1').style.display="none"; 
             document.getElementById('tab2').style.display="none";
             document.getElementById('tab3').style.display="none";
             document.getElementById('tab4').style.display="none";
         }

    });

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <form name="meuFormulario">
       <label>SELECIONE UMA OPÇÃO</label> 
       <label><input value="A" name="opcao" class="opcao" id="opcao1" type="radio">opcao A</label> 
       <label><input value="B" name="opcao" class="opcao" id="opcao2" type="radio">opcao B</label><br>
       <label>SELECIONE UMA OPÇÃO</label> 
       <label><input value="C" name="opcao2" class="opcao" id="opcao3" type="radio">opcao C</label> 
        <label><input value="D" name="opcao2" class="opcao" id="opcao4" type="radio">opcao D</label> 
     </form> 
</div>

<div>
<div id="tab1" style="display: none;">
    <p>form A C</p>     
</div>
<div id="tab2" style="display: none;">
    <p>form A D</p>
</div>
<div id="tab3" style="display: none;">
    <p>form B C</p>
</div>
<div id="tab4" style="display: none;">
    <p>form B D</p>
</div>

answered Solution ? Enjoy : Let’s work more

Answer 2

$(document).ready(function() {

    $('input[type="radio"]').change(function(event) {
        var option1 = $('input[name="opcao"]').filter(':checked').val();
        var option2 = $('input[name="opcao2"]').filter(':checked').val();
        getForm(option1, option2)

    });

    // Traz o form com ajax
    function getForm(option1, option2){
        console.log(option1);
        console.log(option2);

        if ( (option1 == 'A') && (option2 == 'C') ) {
            // Faz uma chamada ajax para trazer o formulario
        }

        if ( (option1 === 'A' && option2 === 'D') ) {
            // Faz uma chamada ajax para trazer o formulario
        }

        if ( (option1 === 'B' && option2 === 'C') ) {
            // Faz uma chamada ajax para trazer o formulario
        }

        if ( (option1 === 'B' && option2 === 'D') ) {
            // Faz uma chamada ajax para trazer o formulario
        }
    }

});

You can make ajax calls according to the input value.