CODEWITHSUNDEEP
javascriptjqueryradio-buttonshow-hide
user2736472
user2736472

Reputation: 41

Show div on radio button check

I would like to hide a div until the leased radio button is selected. This div contains input fields only relative to the leased radio selection, so hiding them when the owned radio button is selected is preferred. However, the code I have is not working.

HTML

<div id="surv_radio4">
    <p>
        Merchant Site Property is
    </p>
    <input type="radio" id="owned" value="owned" name="merchant_property"/>
    <label for="owned">Owned</label>
    <input type="radio" id="leased" value="leased" name="merchant_property"/>
    <label for="leased">Leased</label>
</div>
<div id="surv_5">
    <label for="landlord_name" class="test">Landlord Name</label>
    <input type="text" id="landlord_name" placeholder="Landlord Name"/>
    <label for="landlord_phone">Phone Number</label>
    <input type="text" id="landlord_phone" placeholder="XXX-XXX-XXXX"/>
</div>

CSS

#surv_5 {
    display: none;
}

Javascript

<script>
$(document).ready.(function() {
    $("input[name$='merchant_property']").click(function() {
        var value = $(this).val();
        if (value == 'leased') {
            $("#surv_5").show();
        } else if (value == 'owned') {
            $("#surv_5").hide();
        }
    });
});
</script>

Upvotes: 0

Views: 158

Answers (3)

blurfus
blurfus

Reputation: 14041

On your original code, you also had an error on your else statement.. See fiddle here

Relevant bits below:

if (value == 'leased') {
  $("#surv_5").show();
} else if(value == 'owned'){
  $("#surv_5").hide();
}

UPDATE

Too late, looks like @Hiral has an answer for you....

Upvotes: 0

isherwood
isherwood

Reputation: 61114

Your document.ready function has a syntax error (extra period):

$(document).ready(function () {

http://jsfiddle.net/isherwood/tW3D5/

Upvotes: 2

codingrose
codingrose

Reputation: 15709

Try this:

$("input[name$='merchant_property']").change(function () {
    var value = $(this).val();    
    if (value == 'leased') {        
        $("#surv_5").show();
    } else {
        $("#surv_5").hide();
    }
});

Fiddle here.

Upvotes: 0

Related Questions