Short jQuery script to clear form

Clearing a form can sometimes be a bit of a hassle since there’s no native functionality for that – the “reset” button resets the form fields to their default values, not clears them. The script below takes care of exactly that, taking into account some of the newer input types (such as “email” and “date”). It is written as an extension to jQuery, meaning you can use it like a jQuery method, something like this `$(‘#myform’).clearForm()`, but it can easily be written as a regular stand alone function.

// .clearForm - clears form fields from any values
$.fn.clearForm = function () {
	var el = this.find('input, select, textarea'),
		len = el.length,
		i = 0;
	for (; i  len; i++) {
		switch (el[i].type) {
			case 'text':
			case 'password':
			case 'select-one':
			case 'select-multiple':
			case 'textarea':
			case 'email':
			case 'date':
			case 'number':
			case 'phone':
				$(el[i]).val('');
				break;
			case 'checkbox':
			case 'radio':
				el[i].checked = false;
		}
	}
}
// end .clearForm

Read more »

Simple Tooltip plugin for jQuery

This is a simple tooltip plugin for jQuery. I wanted to create it in part to try out a few ideas, but also to have something a bit nicer than the default tooltips provided by the browsers. It doesn’t allow for ton of customization (none in fact), although the style can be easily modified via CSS. I like customization so it’s something I may add in the future but for now I wanted to get this going and not get bogged down in a more complex implementation. In the process of writing this latest iteration of the plugin (it’s not the first time I’ve started it) I had a bit of a “lightbulb” moment and I wanted to share it. Read more »

Better jQuery Placeholder Plugin

A while back I made a post about a simple placeholder script I wrote. The idea was to provide the placeholder functionality that browsers like Chrome and Safari have, to browsers that don’t have it, like Firefox and IE. The script was very simple though and not smart in a few ways, including inability to handle password fields and an incorrect way of checking placeholder support in the browser. Since then I wrote an improved version of the script, in the form of a jQuery plugin. The highlights of this improved script include

  • proper use of jQuery’s plugin framework to create a fully chain-able plugin
  • support for password fields and text areas
  • correct check for placeholder support in browser
  • and just overall a better written piece of code

You can see a demo of the plugin in action and download the commented source file (4.7kb),  or the minified source file (1.7kb), or the clean (not minified but not commented) source file (2.6kb). Below I’ll go over some of the more interesting parts of script. Read more »