This is a rewrite from an article I’ve post before on Web Development Blog. All code, the demo and the information has got an update.
Populate a SELECT menu
One of the most powerful jQuery functions is the Ajax. function. This example shows how-to populate a second select menu based on the option from the first select menu. This is an feature that becomes very useful on your product pages.
Just in case we have this select menu with these main categories (colors):
If someone has changed the color for this select menu, the form shows the available size in inside the SPAN element with the ID “subcat”. To do this we use this jQuery snippet that makes an Ajax request to a PHP file called “getSubCat.php”. After the select menu is changed a loading image will show up (in case of slow Internet connections), the PHP script is called and the sub-select menu becomes visible.
This is a simple example on how you can use the jQuery Ajax function, the Ajax function has much more options which makes it a very flexible function.
Disable/enable the form submit button
On pages with a registration or payment/order form, you like to treat the visitor to accept some terms of service before he/she can post the form. A very nice function to do this is, to disable the submit button until the visitor has clicked a check box (like: Click here to accept the TOS). The following snippet will enable/disable the submit button if the check box element is checked or not.
Together with this function, we use the following HTML for the submit button:
Simple photo gallery with thumbnails
If you’re looking for a light-weight photo gallery function, than is this jQuery snippet for you. The function works very simple: If the visitor has clicked a thumbnail the value from the “href” attribute is passed to the “src” attribute from the bigger image. Thats all, check the jQuery code and of course the HTML code example.
Show/hide HTML elements based on a selection
jQuery has great functions to show or hide HTML elements. This example is about to show a list of credit cards whenever the radio button with value “creditcar” is checked. The script checks which radio button is checked and shows the SELECT menu on “true” or hides the list on false.
The HTML snippet has a radio group and a DIV container which becomes visible when the radio button with the value “creditcard” is checked.
Count clicks for Google Analytics
The last snippet is an easy way to count clicks on links within a specific DIV container. Without the requirement to add additional Google Analytics code to all link elements, it’s possible to count those link clicks in Google Analytics.This tiny function above will count the links from a DIV container with the ID “mylinks” like:
You can try all these jQuery snippets on this demo page, where you can find another download link (there is also one at the top of this page). If you have any question or suggestions, please post your comment below.