|
Using the JQuery Cookie plugin to emulate server side forms |
||||||||
A project request recently came up where we needed to track some users responses to a series of questions, then build an account 'home' page based on those responses. Pretty straight forward you'll agree. The problem here arose from the clients using a bespoke online solution that blocked any kind of server side interaction.
I've played with JavaScript cookies in the past to remember display states in JQuery functions, so I thought they would be a great solution to this. This article deals with how to use JavaScript cookies to emulate a normal form submission.
There is a demo of using the JQuery Cookie plugin to emulate forms here.
Because we can't use any server side requests we are going to store all the users' choices in their cookie scope. For the cookie handling I'm using a JQuery plugin, http://plugins.jquery.com/project/cookie. It is a great little plugin that allows you to read, write and delete cookies. Firstly I've built a simple form, so that you can choose some options.
2
3<div>
4 <div class="label">What is your favourite colour?</div>
5 <div class="field"><select name="colour" style="width: 100px;">
6 <option value="">Select</option>
7 <option value="red">Red</option>
8 <option value="green">Green</option>
9 <option value="blue">Blue</option>
10 <option value="yellow">Yellow</option>
11 </select></div>
12</div>
13<p><br></p>
14<div>
15 <div class="label">Choose one of these three foods</div>
16 <p><br></p>
17 <div>
18 <h4>Cheese</h4>
19 <img src="cheese.jpg" alt="cheese" height="100" width="100"><input type="radio" name="foods" value="cheese">
20
21 <h4>Ham</h4>
22 <img src="ham.jpg" alt="ham" height="100" width="100"><input type="radio" name="foods" value="ham">
23
24 <h4>Pickles</h4>
25 <img src="pickles.jpg" alt="pickles" height="100" width="100"><input type="radio" name="foods" value="pickles">
26 </div>
27</div>
28
29<input type="submit" name="Action" value="Submit">
30
31</form>
As you can see it is very simple. It only contains a Select field, and a set of Radio values. I've chosen different field types to demonstrate that this works across different form field types.
Next we will create a JavaScript function that has the form fields listed as selectors.
2 $(document).ready(function() {
3 // cookie handling function
4 $('select, input').change(function() {
5
6 var cookieName = $(this).attr('name');
7 var cookieValue = $(this).attr('value');
8
9 // set cookie
10 $.cookie(cookieName, cookieValue);
11
12 })
13 });
14</s/cript>
This function will watch for a change event against any 'select' and 'input' fields, and set a cookie values based on the name of the field, and the value of the field. The syntax for the $.cookie() plugin is incredibly simple. Here we are creating cookies, passing in the name of the cookie, and the value we want the cookie to have.
If it already exists it will simply overwrite it. It works in a very similar way to the cfcookie tag.
Next we are passed to a 'results.cfm' page, where we read the value of the cookies and change a few display options accordingly.
2
3$(document).ready(function() {
4
5// colour cookie
6var colourValue = $.cookie('colour');
7
8$("#cookieColour").text(colourValue);
9$("#cookieColour").css({'color' : colourValue, 'font-size': '20px'});
10
11// food cookie
12var foodValue = $.cookie('foods');
13$("#food").attr({src: foodValue + '.jpg'});
14
15});
16</s/cript>
17
18Your favourite colour is: <span id="cookieColour" style="border: 1px #ff0000 solid"></span>
19
20Your favourite food is:
21<img id="food" width="50" height="50">
The script above is setting a JavaScript variable called 'colourValue' as the value of the cookie we just created, then using the JQuery .css function we are dynamically writing out text in the right colour.
The second value 'foodValue' is simply assigning a src value to an html image tag.
There is a demo of using the JQuery Cookie plugin to emulate forms here.
There are no comments for this entry.
[Add Comment] [Subscribe to Comments]