Question

Here’s a page I have that asks the user to select what kind of profile they would use

<div data-role="page" id="profile" data-content-theme="a">
<div data-role="content">
<center>
<font size="6">
<br>Select Profile<br><br>
</font>
<img src="images/logo.png" width="70%">
</center>
<a href="#main" data-role="button" style="position:absolute; bottom:85px; width:90%;">Guest</a>
<a href="#main" data-role="button" style="position:absolute; bottom:25px; width:90%;">Enthusiast</a>        
</div>   
</div><!-- /page profile select -->

Both buttons lead to the same page, however, depending on the profile selected I need to present more detailed informaion on another page, further in the web site. I thought of using cookies to store some info about what the user has selected, and then once they choose to visit the info page, that would check their profile and give them the appropriate info. I don’t know how to start with this though. I though I’d have to use some php code, but I have been unable to make these buttons do anything. How can I make them store some variable that I would later be able to check in the info page?

Answer 1

Setting a cookie is a good way to go about this. You can create and read from a cookie in Javascript – have a read of this for a description of how to do so: http://www.w3schools.com/js/js_cookies.asp

In your specific case, wire up ‘click’ event handlers for the two buttons, and have the handlers:

• check for an existing cookie. If there is one, write an attribute that corresponds to the button that was clicked

• If there isn’t an existing cookie, create one and then write the attribute

Then when the later page loads, you can have a JavaScript function that reads the cookie information and either hides or makes visible the extra content