Codepal

We develop enthralling web experiences.

The 'Select' Problem After Using jqTransform and its Solution

The ‘Select’ Problem After Using jqTransform and its Solution

Recently, I was working on a project which required a customized form with only select boxes. I used jqTransform to customize the form and while working on it I discovered that after transforming the select box into a list of hyperlinks, the ‘change’ method of the select box doesn’t work at all. As ‘on-value-change’ event is a very important function for any drop down list box so here is a very simple solution to manipulate it while using jqTransform.

Live Demo Downloadhttp://www.code-pal.com/wp-content/plugins/download-monitor/download.php?id=6

It would be awesome if you could like us on Facebook or subscribe to our feed...

The Project

In this recent project of mine, I was required to construct a landing page. In this landing page, there would be a list of languages and after the user selects any particular language, the homepage of the site would open automatically in the respective selected language. It was also required to style the select list box in the way it was given in the design of the landing page. So I opted for the jqTransform jQuery plug-in, which I used once to style some forms. jqTransform is very nice plug-in to customize the forms in a very easy way and the end product is no doubt beautiful. But in this case, it became a minor speed breaker to my progress.

The Problem

The drop down list control of the html form contains the ‘select’ tags which enclose the various ‘option’ tags. Here is a form which I am using in this tutorial to explain the problem:

What jqTransform does is, it scans the whole ‘select’ tag and creates an unordered list containing hyper-links of the options in the drop-down-list. It then hides the original ‘select’ tag and its content.

This does not create a problem when we use the ‘select’ tag generally for selecting a particular value and then performing the form submission by using a submit button. It creates a problem when we want to perform some function when the value of the drop down list is changed.

This is normally achieved in javascript by using the ‘change’ method of the select control. The ‘change’ method captures the value-change event and we can access the value selected by the user in the following manner.

But after using the jqTransform plugin, the ‘select’ tag is no more there to apply the change method on.

The Solution

The solution to this, is a very simple one. We can simulate the change event for the jqTransformed drop down list by applying a click function to the hyper-link element within the unordered list. Then we can have the selected value by accessing the text of the span tag where the selected element is set or displayed.

Conclusion

This is one way of simulating the change function for drop-down-list boxes after using jqTransform to customize them. The other option is to modify the jqTransform plugin itself to properly access the onChange event of the ‘Select’ boxes. I hope the jqTransform plug-in developers can fix this problem in their next release of the plug-in. Though this is not a very important or common bug but I do hope that this was of some help.


Discussion 83 Responses

I have an issue with jqtransform. Though it’s not associated with this post, but it’ll be really helpful for me.

How to apply different sizes for different text boxes?
I achieved it by using

to .jqTransformInputWrapper and different size

for a particular text box but it doesn’t work in Chrome (Even IE7 works!).

How to add options to select dynamically in jqtransform plugin?

pls it is urgent

Thank you very much for this article, I was looking for this answer all over the net. cheers,keep up the good work.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>