CODEWITHSUNDEEP
javascriptjquerycookies
nickwebdesign
nickwebdesign

Reputation: 35

Show / Hide div based on Cookie Value

I setup a form that people fill out. One of the form fields is a county dropdown. The form action creates a cookie: 

setcookie("county", $county, time() + 3600 /* one hour */, '/', 'subdomain.mydomain.com', false, false);

On the confirmation page I have multiple divs that are hidden by default: 

<div id="county1">County 1 Content</div>
<div id="county2">County 2 Content</div>
<div id="county3">County 3 Content</div>

and so on...

Based on the county the user selects from the select drop down on the previous page I want the particular div to to display.

I tried: 

<div style="visibility: hidden"><input id="county" name="county" value="<?php echo($_COOKIE['county']); ?>"></div>

and

$('#county').on('load', function () {
    if(this.value === "County1"){
        $("#county1").show();
    } else {
        $("#county1").hide();
    }
});

but input doesn't seem to support onLoad. Any suggestions?

Thanks!!

Upvotes: 0

Views: 3990

Answers (1)

Petar Butkovic
Petar Butkovic

Reputation: 1900

Did you try $( document ).ready()

JQuery documentaion

For example;

$(document).ready(function() {
    if($.cookie('county') === "County1"){
        $("#county1").show();
    }else{
        $("#county1").hide();
    }
});

I'm using jquery cookie plugin: https://github.com/carhartl/jquery-cookie

Upvotes: 4

Related Questions