CODEWITHSUNDEEP
javascriptjqueryhtmlruby-on-railsradio-button
Frank
Frank

Reputation: 45

How to Show and hide table with radio buttons?

Do you have any idea to rewrite the jQuery code to choose between to two selection options (Yes and No)? .

I tried this in jQuery :

$(document).ready(function() {
    $("#send_to_one").hide();
    $("input:radio[name='decision']").change(function(){

    if(this.checked){
        if(this.value =='one'){
            $("#send_to_one").show() && $("#send_to_two").hide()
        }else if(this.value =='two'){
            $("#send_to_two").show()
        }else{
           $("#send_to_one").hide();
        }
    }
    });
});

CSS :

#send_to_one{
   display:none;
}

#send_to_two{
   display:none;
}

The "Yes" button send_to_one works well, if I select it, the correct informations are shown and the informations from send_to_two are hidden. If I select the "No" button the informations from send_to_two are shown, but the send_to_one informations are still shown. I tried to use the command from the first if statement, but this doesn't work. Do you have any ideas?

Thanks for your help, but always i add the recommended command the send_to_twoaction doesn't work.

This is my _form. Did i maybe make a mistake there?

<h2>Are you insured?</h2> <div id="send_to"> <input type="radio" id="send_poll" name="decision" value="one" checked="checked" />Yes<br/> <input type="radio" id="send_poll" name="decision" value="two" />No<br/> <div id="send_to_one"> <div class="table-row-2"> <div align="center"> <div class="field"> <div class="table"><%= ........ %></div><div class="table"></div><div class="table"></div> </div> </div> </div> <div id="send_to_two"> <div class="table-row-2"> <div align="center"> <div class="field"> <div class="table"> <div class="table"><%= ..... %></div><div class="table"></div><div class="table"></div></div> </div> </div> </div> </div> </div>

Thanks for your Help!

Upvotes: 1

Views: 150

Answers (4)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

You're just missing the hide statement in the second condition, your code should be :

if(this.value =='one')
{
    $("#send_to_one").show();
    $("#send_to_two").hide();
}else if(this.value =='two'){
    $("#send_to_two").show();
    $("#send_to_one").hide(); //<<---------- Adding this line to hide 'send_to_one'
}else{
    $("#send_to_one").hide();
}

Because you're using jquery better if you use jquery object $(thhis):

$(document).ready(function() {
    $("#send_to_one").hide();
    $("input:radio[name='decision']").change(function()
    {
        if( $(this).is(':checked')  )
        {
            if($(this).val()==='one')
            {
                $("#send_to_one").show();
                $("#send_to_two").hide();
            }
            else if($(this).val()==='two')
            {
                $("#send_to_two").show();
                $("#send_to_one").hide();
            }
            else
            {
               $("#send_to_one").hide();
            }
        }
    });
});

Hope this helps.

$(document).ready(function() {
  $("#send_to_one").hide();

  $("input:radio[name='decision']").change(function(){
    if($(this).is(':checked'))
    {
      if($(this).val()==='one')
      {
        $("#send_to_one").show();
        $("#send_to_two").hide();
      }
      else if($(this).val()==='two')
      {
        $("#send_to_two").show();
        $("#send_to_one").hide();
      }
      else
      {
        $("#send_to_one").hide();
      }
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name='decision' value='one'/>Yes
<input type="radio" name='decision' value='two' checked/>No
<br/>
<div id="send_to_one">
  send_to_one div 
</div>

<div id="send_to_two">
  send_to_two div
</div>

Upvotes: 1

RV Technologies
RV Technologies

Reputation: 50

Hope this will help you:

$(document).ready(function() {
    $("#send_to_one").hide();
    $("#send_to_two").hide();
    $("input:radio[name='decision']").click(function(){
        if($(this).val() =='one'){
                $("#send_to_one").show();
                $("#send_to_two").hide();
        }else if($(this).val() =='two'){
                $("#send_to_one").hide();
                $("#send_to_two").show();
        }else{
                $("#send_to_one").hide();
                $("#send_to_two").hide();
        }
    });
});

Upvotes: 0

user4520208
user4520208

Reputation:

Try this And check your code for missing ; 

 $(document).ready(function() {
        $("#send_to_one").hide();
        $("input:radio[name='decision']").change(function(){

        if(this.checked){
            if(this.value =='one'){
                $("#send_to_one").show(); 
                $("#send_to_two").hide();
            }else if(this.value =='two'){
                $("#send_to_two").show();
                $("#send_to_one").hide();
            }
        }
        });
    });

Upvotes: 0

Sunil
Sunil

Reputation: 929

if(this.checked){
        if(this.value =='one'){
            $("#send_to_one").show() && $("#send_to_two").hide()
        }else if(this.value =='two'){
            $("#send_to_two").show();
            $("#send_to_one").hide()
        }else{
           $("#send_to_one").hide();
        }
    }

Upvotes: 0

Related Questions