Over a million developers have joined DZone.

Make That Form User Friendly!

DZone's Guide to

Make That Form User Friendly!

· Web Dev Zone ·
Free Resource

A true open source, API-first CMS — giving you the power to think outside the webpage. Try it for free.

I am reading the jQuery Cookbook at the moment and I will blog some interesting examples I am coming across and padding out, if even only slightly. Hopefully this makes more sense to the untrained eye. So let's begin! Consider a form as such:

Who is going to win the Heineken cup next year?

Click on any one of the teams, notice that the radio box is selected. Then start typing in the "Other" text box. Isn't it a bit odd that the team you previously selected is still selected even though you clearly started typing in the "Other" textbox. Does the user seriously have to select the "other" radio button though an "other" indication has already been given? Now, this time clear out the "other" text box and select another team. Then select the "other" radio button. Notice that the "other" textbox does not have focus even though you are hardly going to click the other box and not want to type anything. You are not that irrational. The point is that when the "Other" radio box is selected, it makes sense that its adjacent text box should get focus. Remember, good usability means the user can achieve what they want with less clicking. And remember, good usability means that things are intuitive and GUIs do not display contradictions. So we really want something like this:

Who is going to win the Heineken cup next year?

So how did we do that? Well let's take a look at the code:

<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
Consider a form as such:
<p>Who is going to win the Heineken cup next year?</P>
<ul id="choice">
<input name="source" id="source1" type="radio" value="Leinster"/>
<label for="source1">Leinster</label>
<input name="source" id="source2" type="radio" value="Munster"/>
<label for="source2">Munster</label>
<input name="source" id="source3" type="radio" value="Ulster"/>
<label for="source3">Ulster</label>
<input name="source" id="source4" type="radio" value="Connacht"/>
<label for="source4">Connacht</label>
<input name="source" id="source5" type="radio" value="Other"/>
<label for="source5">Other</label>
<input name="Source5Txt" id="Source5Txt" type="text"/>
$('#choice input:text').(function() {
   // store some variables locally as they are used more than once.
   var $inputText = $(this);
   var $radioBtn = $inputText.siblings('input:radio'); // all sibling radio buttons

   // If any of the sibling radio buttons change, check to see
      // if it checked focus on the text input
      if (this.checked) {$inputText.focus();}

   // listen for the blur event on the text input
   $inputText.keypress(function() {
       $radioBtn.attr('checked', true);


  1. :text is a JQuery psuedo class Selector which selects all elements of type text. As per JQuery recommendations, pseudo class Selectors should be preceded with another selector or tag element otherwise the universal selector is implied. In this case we do input:text. In this case, only one text box will be selected. That's ok.
  2. The .each(function(){ in this case means iterate overall inputs of type text and execute the specified function. Don't forget ".each" can operate on sets of elements of any size including just 1 which is the case in this example.
  3. $(this) corresponds to the object which is being operated on by each. In this case it is each input text box. If you don't believe me add:
      console.log("this is: " + $(this)[0].id);

    and you will see something like:

    this is: Source5Txt in the console.

  4. The inputText button and radio button are stored in the local context. This is for efficiency.
Until next time, take care of yourselves.

The New Standard for a Hybrid CMS: GraphQL Support, Scripting as a Service, SPA Support. Watch on-demand now.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}