CODEWITHSUNDEEP
javascriptforms
Agnes
Agnes

Reputation: 53

How to Show/hide a <div> based on radio checked, not clicked

I am trying to show a <div> when a certain radio button is selected by the user. I found some nice code form http://www.tutorialrepublic.com/faq/show-hide-divs-based-on-radio-button-selection-in-jquery.php and I adapted it for myself like this:

With the CSS & script:

 <style type="text/css">
    .box{padding: 2px;display: none;margin-top: 2px;border: 0px solid #000;}
    .red{ }
    .green{  }
    .blue{ }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        if($(this).attr("value")=="Tax representation"){
            $(".box").not(".red").hide();
            $(".red").show();
        }
        if($(this).attr("value")=="VAT recovery"){
            $(".box").not(".green").hide();
            $(".green").show();
        }
        if($(this).attr("value")=="Other"){
            $(".box").not(".blue").hide();
            $(".blue").show();
        }
    });
});
</script>

Then I got this to remember the selection:

if (!empty($_REQUEST['object'])) { $object = $_REQUEST['object']; }

Add the radio selection in the form that remembers the selection if the form needs to be reloaded:

<input tabindex="1" type="radio" name="object" <?php if (isset($object) && $object=="Tax representation") echo "checked";?> value="Tax representation">Tax representation
<input tabindex="2" type="radio" name="object" <?php if (isset($object) && $object=="VAT recovery") echo "checked";?> value="VAT recovery">VAT recovery
<input tabindex="3" type="radio" name="object" <?php if (isset($object) && $object=="Other") echo "checked";?> value="Other">Other

Followed with the <div> to be shown or hidden:

    <div class="red box">text 1</div>
    <div class="green box">text 2</div>
    <div class="blue box">text 3</div>

Now my problem is that when the form is reloaded, the radio selection is memorized, but the corresponding <div> does not show. I believe there may be a way to change the script from "click" to "selected" or something like that. Would you help?

Upvotes: 0

Views: 1748

Answers (3)

Shaun
Shaun

Reputation: 2052

This is similar to previous answers, extracting the behavior into a function so that you can run it on page load and in an event:

function showBoxes(value) {
  if(value=="Tax representation"){
    $(".box").not(".red").hide();
    $(".red").show();
  }
  if(value=="VAT recovery"){
    $(".box").not(".green").hide();
    $(".green").show();
  }
  if(value=="Other"){
    $(".box").not(".blue").hide();
    $(".blue").show();
  }
}

$(document).ready(function(){
  showBoxes($("input[type='radio']:checked").attr("value"));
  $('input[type="radio"]').click(function(){
    showBoxes($(this).attr("value"));
  });
});

jsFiddle

Upvotes: 1

Rajshekar Reddy
Rajshekar Reddy

Reputation: 19007

Add this line after your $('input[type="radio"]').click(function(){ code and inside the document.ready block

$('input[type="radio"]:checked').trigger('click');

Your current logic will work only when the radio buttons are clicked. So let's trigger the click event of the checked radio button when the page reloads. Which inturn will run your logic and toggle the divs accordingly.

Upvotes: 0

Isaiah Turner
Isaiah Turner

Reputation: 2662

Use change instead of click

$('input[type="radio"]').change(function(){

Then, move your function to a variable and call it when the page loads.

The final code should look something like this.

$(document).ready(function(){
    var updateDivs = function(){
        if($(this).attr("value")=="Tax representation"){
            $(".box").not(".red").hide();
            $(".red").show();
        }
        if($(this).attr("value")=="VAT recovery"){
            $(".box").not(".green").hide();
            $(".green").show();
        }
        if($(this).attr("value")=="Other"){
            $(".box").not(".blue").hide();
            $(".blue").show();
        }
    }
    $('input[type="radio"]').click(updateCheckbox);
    $.proxy(updateDivs, $('input[type="radio"]'))
});

Upvotes: 0

Related Questions