When in doubt, jQuery is the answer

Its not a surprise to hear that jQuery is a powerful tool in a web developers arsenal of languages to have. More and more I turn to jQuery in moments of desperation when I find that what I need to do is either impossible in that situation using traditional means (ie adding an element or class to an element into automatically generated code that you have no control over) or to do something a designer has just thought of and thinks it would be cool to have on the page even though in a web developers mind, it’s not even something that would be contemplated. JQuery always comes to the party.

The amount of functions available make this library so easy to use, especially when there are direct equivalents to functions that exist in php, like trim. So far there hasn’t been a problem that couldn’t be solved with jQuery.

Examples of this is when your using a user-friendly system that allows you to enter, let’s say a form, into a page which links into the systems databases and functions. Because this system is user-friendly system for the non-technical folk out there, it doesn’t allow modification to the tags that are given. Now enter designer that wants the form to have a two column form with labels above each input field, validation with a note per field and the submit button in a format using CSS3 elements. The form you have to work with has no containers around each field, no classes or ids and the submit button is defaulted using an image to give the non-technical user some hope of having a form that doesn’t just look like any old form. In a world without jQuery, this situation ended well before the designer.

However we do live in a world with jQuery so we have a mountain of options we can use here. First of all, you can add classes to anything you need to (for examples sake, let’s just forget that in the CSS you could just use “input[name=email]” as a selector) by getting the name of the field and using that as the class:
$("input").each(function() {
$(this).addClass($(this).attr("name")+"_field");
});

Or add a container around the label and input field:
$("label").before('<div class="field_container">');
$("input").after('</div>');

Or convert that pesky image submit button back to a normal submit button:
$("input[type=image]").removeAttr('src').attr('type', 'submit').attr('value', 'Send');

All very simple pieces of jQuery that have a powerful effect on how you can change a form that you previously had no control over. So instead of throwing your hands in the air and saying it can’t be done, grab the jQuery library and find a solution. Anything can be done, just depends on how long you have to do it 😉

Leave a Reply

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