The Background

In a recent project I needed to get a basic form working. It took some effort to get a custom registration form plugged in to eZ Publish but I’m still very new to the system so I can’t complain much. Once the custom registration extension was coded and the form was tested in its unstyled state, it was time to add the styling. I was handed static HTML from the designer (not me in this case) and needed to get the live version working quickly as the project was coming to an end. So I stayed on course religiously with the design specs given to me and used the jQTransform plugin for jQuery. It takes your forms and styles them. Very swanky and neat looking. However, some things to note about jQTransform:

• Bad keyboard support for form fields including drop down menus (tabbing and arrow interaction)
• User Interface needs work (i.e. Users expect checkboxes to be selected with spacebar as opposed to enter.. what about both?)
• Does not handle the case of showing/hiding form elements depending on selection of other form elements out-of-the-box

This last item I found to be quite discouraging.

In hindsight it wasn’t very complicated at all. It was a 3 state form:

• show no optional fields (initial state)
• show the Employee’s fields (hide Contractor fields)
• show the Contractor’s fields (hide Employee fields)

State 1:

State 2:

State 3:

Easy right? Just add jQuery show/hide!

WRONG

The plugin doesn’t do too bad with the regular text line inputs but the problem I ran into is the plugin changes the HTML on page load. Actually, it appends an entirely new set of elements to the HTML and hides the original <select> block. Not only that, but other classes were added/removed on the fly when a user clicks the drop-down menu. So essentially it’s doing some fancy dancy manipulation to get the fields to be styled like you want it. So instead of trying to actually style the <select> tags it’s replacing those with <ul>/<li> tags and keeping track of what’s selected to get around that issue of no styling support for the <select> tag.

The Fix

The reason I could not simply use my own show/hide code to control the simple behavior was that the plugin had hijacked control of the elements in question, namely the click handler for the <a> tags within <ul>/<li> tags. Instead of fighting for control of the <a> click handler I had to make the plugin give that control back to me. Thus by adding an ID to the HTML and a couple function calls I was back in control of my world.

Hacking jqTransform

Here’s a snippit of the jqTransform code starting around line 250, but more specifically within the Select section. I gave my custom code top priority in the handler as it looked for the custom ID’s I set up. Not that pretty, but it’ll do.

/***************************
  Select
 ***************************/
$.fn.jqTransSelect = function(){
    ...
    ...
	/* Now add the html for the select */
	$wrapper.prepend('<div><span></span><a href="#"></a></div><ul></ul>');
	var $ul = $('ul', $wrapper).css('width',$select.width()).hide();
	/* Now we add the options */
	$('option', this).each(function(i){...});

	/* Add click handler to the a */
	$ul.find('a').click(function(){
		//Custom behavior
		var thisID = $(this).attr('id');
		if (thisID == "emp-fields"){showEmployeeFields();}
		else if(thisID == "con-fields"){showContractorFields();}
                ...
                ...
        });

My jQuery Code

I placed this code outside of the jqTransform code and in a separate JS file. The reason for the $(document).ready part WITHIN these functions is for insurance. In fact I saw some funky stuff happening when I first decided to leave it out.

function showEmployeeFields(){
	$(document).ready(function(){
		$("#emp").show();
		$("#con1").hide();
		$("#con2").hide();
	});
}
function showContractorFields(){
	$(document).ready(function(){
		$("#emp").hide();
		$("#con1").show();
		$("#con2").show();
	});
}

The HTML

<div>
     <label for="user_type">I Am A :</label>
     <select tabindex="4" name="user_type">
          <option id="selected_user_type">* Please Select</option>
          <option id="emp-fields" value="Internal Staff">Employee</option>
          <option id="con-fields" value="External Contractor">Vendor</option>
     </select>
</div>

<!-- Additional fields for Contractors -->
<div id="con1"><input type="text" name="sponsor_name" size="20"value="* Sponsor's Name"/></div>
<div id="con2"><input type="text" name="sponsor_email_address" size="20" value="* Sponsor's E-mail"/></div>

<!-- Additional fields for Emplopyees -->
<div id="emp">
 <select name="position">
 <option value="196">Administrative Assistant</option>
 <option value="194">Manager</option>
 <option value="195">Senior Manager</option>
 </select>
</div>

This could have been done differently but this is just a simple modification to let a user take back some control that’s lost when using a heavy plugin such as jqTransform.