Two Little Snippets

Part of my continuing quest to use Javascript in responsible, degradable ways is documented below.

I’m coming to the end of a development period that involved building an e-commerce solution and sign up procedure. I saw two possible uses for some nice unobtrusive Javascript here.

In the first example (and this is one is very simple indeed) I wanted a way to have a value in a form field as per WCAG 1.0 guidelines dictate. However, whenever I see these implemented, the author fails to clear the form when the field in question gains focus meaning a user has to manually clear the placeholder value themselves – something of a pain. The solution in this case is as simple as:

window.onload = function() {
	if (!document.getElementById) return false;	

	var e = document.getElementById("email");
	e.onfocus = function() {
		e.value = "";
		return false;
	}	
}

And the markup:

So, the Javascript first checks that the function we need is supported by the browser. If its not then thats that – it won’t work but nothing is visually affected and no error alerts will appear. The worst case scenario is that the user muse clear the field manually.

If getElementByID() _is_ supported then we declare an onfocus() function that clears the value – and thats that. Job done.

My second idea was to aid the process of filling out address details. In most cases when you are buying from an online shop you must specify and billing address _and_ a shipping address. Obviously, its easy to grab the values of one set of fields and marry them up with another set but all the solutions I’d seen had no non-js fallback position and most had loads of JS attrtibutes in the markup which is something I really want to avoid. So, first lets look at out form:

	

	

		<h2>Billing Address</h2>
	
		Address
		
		
		
		
		
		
		
		
		Town
		
		
		County
		
		
		Post Code
		
		
		Area
		
  		  United Kingdom
                  Australia
                  Belgium                     
                  Canada
                  Denmark
  		  France
                  Sri Lanka
                  Venezuela
                  Zimbabwe
				
			
		<h2 id="addLnk">Shipping Address</h2>
	
		Address
		
			
		
		
			
		
		
			
		Town
		
			
		County
		
			
		Post Code
		
			
		Area
		
			
	
	

*NB: No, thats not the whole form, this is just the bit we’re interested in.*

Now, what I wanted was an easy way for the billing address details to be copied to the correct shipping address sections but if the user had no JS then to leave the form exactly as it was. Here’s what I did:

window.onload = function() {
	if (!document.getElementById) return false;
	if (!document.createElement) return false;
	if (!document.createTextNode) return false;
	if (!document.getElementsByTagName) return false;

	var h = document.getElementById("addLnk");
	var p = document.createElement("p");
	var a = document.createElement("a");
 	a.href = "#ready";
	a.className = "ditto";
 	a.appendChild(document.createTextNode("Shipping address is the same as the Billing address"));
 	h.appendChild(p);
	p.appendChild(a);

	var z = document.getElementsByTagName("a");
	var x = document.getElementById("buyFrm");
	for (var i=0; i<z.length; i++) {
		if (z[i].className == "ditto") {
			z[i].onclick = function() {
				x.sh_add1.value = x.add1.value;
				x.sh_add2.value = x.add2.value;
				x.sh_add3.value = x.add3.value;
				x.sh_town.value = x.town.value;
				x.sh_county.value = x.county.value;
				x.sh_pcode.value = x.pcode.value;
				x.sh_area.value = x.area.value;
				return false;
			}
		}
	}
}

The first four lines check that all the functions we need are available in the users browser. If they're not then nothing gets executed, nothing happens and the suer has the markup above presented to them.

The next section firstly looks for an element with an id of 'addLnk' (look in the markup above for it) and when it finds it, it dynamically creates then appends the following bit of markup:

Shipping address is the same as the Billing address

The link to ‘#ready’ simply moves the user down to the submit button (not shown in the above markup) for another added usability wrinkle. The meat of what this link does is triggered from the class ‘ditto’. Take a look at the last section of Javascript. This basically says that when a link with a class name of ‘ditto’ is clicked then copy the contents of one set of fields to the other. And thats it – job done here too.

These are both very simple bits of scripting but I hope they demonstrate real world practical use but executed in a way that ensures that the code is graceful in its degradation, accessible and separate from the semantic level.