Remember inputted data using jquery cookies

I know what brings you here.
But before that, here’s what were going to do here:

  • Setting up client-side cookies using jquery
  • Using cookies to automatically fill up a form

 

Requirements

 

I decided to ditch the assumptions and proceed with the procedures right away. I figured that most of you doesn’t actually read it.

 

Procedure

As usual, do the housekeeping. Include those 2 files I mentioned in the requirements.

<script src="jq.js"></script>
<script src="jquery.cookie.js"></script>

Create the form:

<form name="x" action="formcookie.php" method="post">
<p>
Remember input?
<input type="checkbox" name="rem" id="rem">
</p>
<p>
name:
<input type="text" name="name" id="name">
</p>
<p>
course:
<input type="text" name="course" id="course">
</p>
<input type="submit" id="btn_submit" value="save">
</form>

Nothing new here, I’m still bad at indenting the code properly. Please bear with me.
The code above is the form that we are going to use. As you can see it has a checkbox which the user can check in order to save his input into a cookie. And uncheck it to delete any existing cookie. That’s just a scenario of what it does, we didn’t actually wrote the code that does what I just said.

Next, write the usual thing to do when using jquery: Initialize elements on page load:

<script>
$(function(){
  //code goes here
});
</script>

Then we assign values to the name and course fields to be equal to the cookies that were going to declare shortly. You can actually check if those cookies exist before assigning it to the textfields. But I didn’t get any error on Firebug so I think this is just fine.

$('#name').val($.cookie('name'));
$('#course').val($.cookie('course'));

Right after the user has clicked on the submit button we want to execute something:

$('#btn_submit').click(function(){
  //something
});

You’re asking what’s something? Here’s the algorithm:

  1. check the if the checkbox is checked
  2. if checked assign the cookies
  3. if not clear the cookies

Next time the page loads: values are automatically assigned to the text fields if the cookies exists.

Okay, so here’s what goes as inside the btn_submit() function. Assign the values which are currently in the text fields into the variables name and course:

var name = $('#name').val();
var course = $('#course').val();

Also assign the status of the checkbox to a variable. The variable cook will have a value of true if the checkbox is checked and false if its not:

var cook = $('#rem').attr('checked');

That’s it! All that is left to do now is to write the code that will assign the cookie if the checkbox is checked. And the code that will clear the cookie if the checkbox isn’t checked:

if(cook == true){
    $.cookie('name', name);
    $.cookie('course', course);
}else{
    //clear cookies
    $.cookie('name', '');
    $.cookie('course', '');
}

 

Conclusion

You have just learned how to use the jquery cookies plugin to create client-side cookies. You can actually use this to add a remember me functionality on your login form or any other kind of form which needs to be automatically filled up based on user preferences.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: