Jquery cookie plugin - conditional content determined by cookie being set

Question

Hello

I have a sign up form that is displayed to all new site visitors. If a user fills out the form, the next time they visit the site, I would like to display a "welcome back" message where the form would usually sit.

I am trying to do this via the jquery cookie plugin (http://plugins.jquery.com/project/Cookie).

My form would look like this:

<div id="sign_up_form_wrapper"><form id="sign_up" action="" method="POST" name="form">
<input type="checkbox" name="checkbox" id="checkbox" value="1">&nbsp; I accept the terms and conditions</a>
<br /><br /><input type="submit" value="ENTER">
</form></div>

And I am setting my cookie here:

<script type="text/javascript" language="javascript">
$().ready(function()
{
    $('#sign_upm').submit(function(e)
    {
        e.preventDefault();

        if ($('#sign_up input[name=checkbox]').is(':checked'))
        {
            $.cookie('agreed_to_terms', '1', { path: '/', expires: 999999 });
        }
    });
});
</script>

That will set the cookie when a user has checked the box, but now I need to do somehting like this:

if the cookie has been set, do this:

<div id="sign_up_form_wrapper">
<p>Welcome back, John</p>
</div>

otherwise do this:

<div id="sign_up_form_wrapper">
<!-- full form code here -->
</div>

Any ideas or pointers would be very appreciated, thanks.

Answer 1

Just get the cookie and check if it is set.

var $signupFormWrapper = $('<div />');

if ( 1 == $.cookie(agreed_to_terms) )
{ 
     var $message = $('<p />').html('Welcome back, John');
} else {
     var $message = $('<p />').html('<form>Your full form</form>');
}

$signupFormWrapper.append($message);

Do this where you want depending on the event which has to be triggered

Answer 2

Yes. Add it just over

});
</script>

Answer 3

Boris Guéry is close:

HTML:

<div id="sign_up_form_wrapper">
<!-- full form code here -->
</div>

JavaScript:

$(function () {
    if ($.cookie('agreed_to_terms') == 1) {
        $('sign_up_form_wrapper').html('<p>Welcome back, John</p>');
    }
});