reptile7's JavaScript blog
Saturday, May 26, 2012
Take Me to the value, Part 3
Blog Entry #252

We continue today our renovation of the cookie redirect script of HTML Goodies' "How Can I Set A Cookie Based On A User's Selection On A Form?" tutorial. In the previous post, we revamped the script's cookieRedirect.js code. Now, how 'bout them cookie.html checkboxes?

Checkbox more is less

Unlike a set of radio buttons or a non-multiple selection list, a set of checkboxes allows the user to make more than one input. Suppose our first-time cookie.html visitor owns an iPhone, an iPad, a separate smartphone running the Android OS, and an old-school Palm PDA, and accordingly checks all four "Please choose your mobile device" checkboxes. What happens?

The Saving Cookies section of the "Netscape Cookies" Appendix of the JavaScript 1.3 Client-Side Reference states:
Saving a cookie with the same PATH and NAME values as an existing cookie overwrites the existing cookie. Saving a cookie with the same PATH value but a different NAME value adds an additional cookie.
Consequently, if the visitor checks the checkboxes from top to bottom, then a single device=palm cookie will be written to cookie.html's document.cookie string. Initially checking the iPhone checkbox first sets a device=iphone cookie, which is sequentially overwritten by device=ipad, device=android, and device=palm cookies* as the visitor checks the following checkboxes. When the visitor returns to cookie.html, s/he will be redirected to palm.html and only to palm.html.

*Although not explicitly set, the path attribute for all of these cookies has the same value, more specifically, it defaults to the absolute path portion of the URI of the current frame or document in each case.

Now, we could give different names to the checkboxes - say, device0, device1, device2, and device3 - and thereby set a separate cookie for each checkbox. Upon a return visit the four cookie values could be extracted and converted to redirection URLs, which in turn could be plugged into a series of ) commands that would open the redirection pages in new windows.

function GetCookie(cookie_name) {
    var deviceURLs = new Array( );
    var aCookie = document.cookie.split("; ");
    for (var i = 0; i < aCookie.length; i++) {
        var aCrumb = aCookie[i].split("=");
        if (cookie_name + i == aCrumb[0]) deviceURLs[i] = aCrumb[1] + ".html"; }
    return deviceURLs; }
var favorite = GetCookie("device");
for (var i = 0; i < favorite.length; i++)[i], "window" + i);

The above GetCookie( ) function was adapted from its namesake in the second example on Microsoft's cookie property page; it uses the split( ) method of the String object to fragment cookie.html's document.cookie string into its constituent names and values. This code works fine on my desktop iMac once browser pop-up blocking has been disabled, but I have no idea how it plays out with a mobile device. Still, even in a best-case scenario, would you want to burden the visitor with four new pages at once? I don't think so.

It gets worse. Unlike a selected radio button or selection list option, a selected checkbox can be deselected by clicking it. Deselecting a device checkbox calls the SetCookie( ) function and sets a new device=value cookie just like selecting it does. Suppose the visitor (a) checks the iPhone checkbox, (b) checks the iPad checkbox, and (c) unchecks the iPad checkbox: at the end of this interaction a device=ipad cookie will be added to cookie.html's document.cookie string, and the visitor will be redirected to ipad.html (and not to iphone.html) upon a return visit. Not what the doctor ordered, is it?

I'd say it's high time we cashed in those checkboxes for some radio buttons or a selection list, wouldn't you?

Creating a corresponding radio button menu is no more difficult than switching the type="checkbox" attributes to type="radio":

<input type="radio" name="device" value="iphone" onclick="SetCookie(, this.value);">iPhone<br>
<input type="radio" name="device" value="ipad" onclick="SetCookie(, this.value);">iPad<br>

If none of the inputs of a radio input set is given a checked attribute, then the entire set is rendered unchecked with all of the GUI browsers on my computer; the HTML 4.01 Specification's radio buttons section is not quite clear as to whether this is legit or not, although the W3C does say, Authors should ensure that in each set of radio buttons that one is initially 'on'. However, some browsers may in this situation check the first-in-source-order iPhone radio button per section of the "Hypertext Markup Language - 2.0" RFC 1866 specification (Lynx does this, e.g.): suppose for a moment that we are dealing with such a browser and that a

document.getElementById("formID").device[0].checked = false;

JavaScript statement does not clear the iPhone button. If the visitor chooses to not interact with the radio button menu, then we shouldn't be setting a device=iphone cookie. But what if the visitor is using an iPhone and wants to be redirected to iphone.html? To set a device=iphone cookie, the visitor will have to click a non-iPhone radio button and then click the iPhone radio button - not good, needless to say. Here is one simple way to sort out these issues:

(1) Attach the "Please choose your mobile device" form legend to a checked radio button; give the button an onclick attribute that can call SetCookie( ) and set a device= cookie whose value is an empty string.

<input type="radio" name="device" value="" onclick="SetCookie(, this.value);" checked>Please choose your mobile device<br>

(2) Append to the cookieRedirect.js redirection code a suitable else if (favorite === "") clause that responds to the device= cookie.

if (favorite) window.location = favorite + ".html";
else if (favorite === "") window.alert("You did not choose a mobile device during your previous visit.");

Recall that null is assigned to favorite for a first-time visit. In a logical context, the empty string and null are both convertible to false but can be distinguished via the === operator.

Reformulating the checkbox menu as a selection list is also pretty straightforward. The preceding considerations for a radio button menu likewise apply to a selection list.

<select name="device" size="5" onchange="SetCookie(, this.value);">
<option value="" selected>Please select your mobile device</option>
<option value="iphone">iPhone</option>
<option value="ipad">iPad</option>


The demo below combines the previous post's JavaScript with a selection list. Selecting a mobile device and clicking the button will within the iframe redirect you to the appropriate redirection document (there's not much to these documents, but then again, this is just a demo).

In the following entry we'll check over the next Beyond HTML : JavaScript sector tutorial, "How To Use JavaScript To Auto-Submit Dropdowns, With No Submit Button".

Comments: Post a Comment

<< Home

Powered by Blogger

Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)