The jQuery Form Helper plugin is a lightweight wrapper for two convenience functions to speed up form development: Text Replacement in <input> fields and Ajax Scaffolding for <form> elements. At only 2.6k compressed, Form Helper is light enough to be included in any project.

Setup

Once you download Form Helper, include it in the <head> after jQuery:

<head>
	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.formHelper.js"></script>
</head>

Text Replacement

Adding default instructional text inside a text box is a common and convenient method of saving space in forms. Form Helper allows you to implement this quickly without requiring you to modify your markup. Run $(elem).textReplacement() on any text input with a default value:

		<script type="text/javascript">
			$(function() {
				//setup text replacement on all inputs
				$("input").textReplacement();
			});
		</script>
		<input type="text" value="The text to be replaced" />
		<input type="text" value="A second box with text replacement" />

Form Helper’s text replacement has a few other notable features.

  • An “active” class is added to any <input> that receives focus and is removed when focus is lost (on blur).
  • A “data entered” class is also added to <input>s on focus but is only removed on blur if the user hasn’t entered any data.
  • Default classes for the “active” and “data entered” states exist (active_formHelper and data_entered_formHelper respectively) but they can be changed by passing options to $(elem).textReplacement().
  • Password <input>s can also benefit from text replacement, which is great for small login forms. Their default value can be passed in with javascript or specified through the “alt” attribute (The “alt” attribute has precedence).
  • Changing the <input>’s type from “password” to “text” doesn’t work in all browsers (Internet Explorer). To remedy this, an <input type=”text” /> with the same class and style attributes is created and swapped in and out for each <input type=”password” />. The limitation of this technique is that any CSS applied to the original <input> by ID will not effect the replacement.
		<script type="text/javascript">
			$(function() {
				$("input[type=text], #pw_with_alt, #pw_no_alt").textReplacement({
					'activeClass': 'active', 	//custom active class
					'dataEnteredClass': 'data_entered', //custom data entered class
					'passwordText': 'PASSWORD' 	//default password text
				});
				
				$("#pw2_no_alt").textReplacement();
			});
		</script>
		<form>
			<!--/* 	standard text replacement w/ a custom active 
					class and a custom data entered class */-->
			<input type="text" value="The text to be replaced" />
			<input type="text" value="A second box with text replacement" />
			
			<!--/* Default Text: The Password */-->
			<input type="password" alt="The Password" id="pw_with_alt" /> 
			
			<!--/* Default Text: PASSWORD */-->
			<input type="password" id="pw_no_alt" />
			
			<!--/* No Default Text (no alt attribute or passwordText) */-->
			<input type="password" id="pw2_no_alt" />
		</form>

Ajax Scaffolding

Submitting a <form> with ajax is made quick and easy by jQuery. Form Helper makes this a little bit quicker by setting a few things up automatically:

  1. An onSubmit handler for the form with $(elem).submit()
  2. Optionally calls a supplied validation function and only continues if it returns true
  3. Submits with jQuery.Ajax() and fills in data (with $(elem).serialize()), type (the <form>’s method attribute) and url (the <form>’s action attribute) automatically, allowing you to supply the other options. Any option accepted by jQuery.Ajax() is also accepted by $(elem).scaffoldAjax().
  4. Returns false to stop the form from submitting.
		<script type="text/javascript">
			$(function() {
				$("form").scaffoldAjax({
					'validate': function() {
						//do validation
						return true;
					},
					'success': function(data) {
						//handle response
					}
				});
			});
		</script>
		<form action="services/doStuff.php" method="POST">
			<input type="text" name="first_name" />
			<input type="text" name="last_name" />
			<input type="submit" />
		</form>