We recently created a contact submission form on a client’s Facebook page, and were not satisfied with the default user experience. For starters, the form opened a new window, and there was no way to redirect the user back to a confirmation message on the Facebook page.

We decided to submit the form via AJAX instead, and show the confirmation message directly on the Facebook page. This way the user would not have to leave the Facebook page, resulting in a smoother user experience. We couldn’t find a good explanation of how to do this on Google, so after figuring it out I decided to go ahead and write it up.

The following example will show you how to submit a basic contact form using AJAX from within your Facebook page. All HTML and Javascript that follows should be pasted directly into the “Edit FBML” screen on Facebook.

Here’s the example form HTML we’ll use for the rest of this article. It’s just two text fields (name and email) and a submit button:

<form action="http://mywebsite.com/form_submit.php" method="post">
     <p>
          <label for="name">Name:</label>
          <input type="text" name="name" id="name" />
     </p>
     <p>
          <label for="email">Email:</label>
          <input type="text" name="email" id="email" />
     </p>
     <button type="submit" onclick="return submitAjaxForm();">Submit</button>
     <p id="ajaxMessage"></p>
</form>

There’s three things you should take note of:

1. The form’s action attribute is set to a page on mywebsite.com, not facebook.com (replace mywebsite.com with your own domain)
2. The submit button has an onSubmit event that calls a function submitAjaxForm, which we’ll define shortly
3. At the end of the form is an empty paragraph tag. We’ll use this space to display messages to the user.

On our server, form_submit.php is a simple PHP script that logs the submissions, and sends back a message for the user letting them know the submission was successful. It might look something like this:

<?php
     log_submission($_POST['name', $_POST['email']);
     echo "Thank you for your submission!";
?>

Of course, your script will be more sophisticated than this one, and doesn’t have to be written in PHP. Its on your server, so you can handle logging the submission however you like. Just make sure the output is valid FBML.

With the form HTML added to your Facebook page and the logging script in place, the only thing left is adding the Javascript to submit the form via AJAX and show the confirmation message.

Note: Facebook does not allow you to use any Javascript function you like, for security purposes. Instead they’ve created a library of Javascript functions for accessing the DOM, AJAX, and event binding called FBJS. These functions are used in the example below.

We’ll now define the submitAjaxForm() function we referenced earlier in our submit button’s onSubmit event:

<script><!--
function submitAjaxForm() 
{ 
	// declare a new FBJS AJAX object
	var ajax = new Ajax(); 
	ajax.responseType = Ajax.FBML;
 
	// define a callback to handle the response from the server
	ajax.ondone = function(data) 
	{ 
		document.getElementById('ajaxMessage').setInnerFBML(data);
	}
 
	// let the user know we're sending the data	
	document.getElementById('ajaxMessage').setInnerXHTML('Submitting your information, please wait...');
 
	// collect field values
	var queryParams = { 'name' : document.getElementById('name').getValue(), 'email' : document.getElementById('email').getValue() };
	ajax.post('http://mywebsite.com/form_submit.php', queryParams);
	return false;
}
//--></script>

Note: The opening and closing HTML comments embedded in the Javascript are important, so leave them intact.

The example is fairly self explanatory, but here’s what’s happening:

1. Declare a new Ajax object, which is one of the FBJS classes. We then set its response type to FBML (Ajax.RAW and Ajax.JSON are also accepted).
2. Define a callback function to handle the response from the server. In this case, our function simply takes the response from the server and displays it in the #ajaxMessage paragraph we defined earlier.
3. Update the user to let them know their data is being submitted using FBJS’s setInnerFBML function.
4. Collect the form field’s values into an array named queryParams, using FBJS’s getElementById and getValue functions. Although getElementById is similar to the standard Javascript function, it accounts for the random slugs Facebook injects into div id’s for security (View Source on a Facebook page and look at the div ID’s to see this in action).
5. Send the AJAX request, using FBJS’ Ajax.post function. The second argument is optional, and should be an array containing the query parameters.
6. “return false;” prevents the form’s normal submit behavior

That’s all there is to it! If you have any questions or if I should clarify a section, let me know in the comments.

Take for example an alumni foundation seeking to target all alumni who donated at least $1,000 last year. Their donor database provides them a table of alumni showing their 2008 donations, like this:

It would be great if we could select these rows easily in jQuery. From there we could remove the others who donated less than $1k from the list, or highlight the ones who did. Ideally, we’d like to do something like this:

$('tr:bigdonor').addClass('highlight');

Of course, “bigdonor” isn’t a real selector, but jQuery makes it trivial to change that. All we must do is define the bigdonor selector, and provide an expression which returns true if the given object is a match, and false if not. Here’s the code:

jQuery.extend(
	jQuery.expr[ ":" ],
	{
		bigdonor : ( "parseInt(jQuery(a).find('td:last').html()) >= 1000" )
	}
);

Explanation:

The first line starts a call to jQuery.extend(), which is a function that allows us to add functionality to jQuery and is the basic way we implement plugins. In the case of a plugin we would extend the jQuery object itself, but in this case we want to extend jQuery’s “:” expression.

Line 4 is where we actually define our custom selector. jQuery already has a list of predefined selectors just like this, and we’re just adding another to the list. Selectors come in two parts, separated by a colon: a symbol, and an expression which must evaluate to true or false. In our case “bigdonor” is the symbol, and the expression is the code in quotes. There’s a bit going on there that’s worth explaining:

In the context of selectors, a is an object which represents the current element. Its equivalent to this in other contexts. So this code looks for the last td element contained by the current element, converts its inner HTML into an integer, and then returns whether or not the result is at least 1000.

With our new selector defined, our original code works as intended. Here it is again:

$('tr:bigdonor').addClass('highlight');

The resulting table might look something like this:

Thats it! Our example is fairly basic, but hopefully you’ve already thought of some ways this can come in handy for your own projects. We find them especially useful for enhancing legacy web apps without modifying the underlying codebase.

On our old website we used jQuery to slide the pages into view when a user clicks on a navigation link. This is a variation of the “Coda Slider”, named because it mimics the website for Panic software’s Coda editor. In a nutshell, we have a div which acts as a viewport (we’ll call it #viewport), with another div inside which contains the pages (which we’ll call #slideContainer). #viewport has its position property set to relative, and its child, #slideContainer, has its position set to absolute. So when we increase or decrease the value of #slideContainer’s left property, it will slide right or left respectively to reveal new pages. Here’s an example:

If the width of one page is 800px, then setting the inner div’s left property to 0 will show the first page, and setting the left property to -800px will bring the second page into view. -1600px shows the third page, -2400px shows the fourth, and so on. So all we have to do is adjust the left property of that div when we want to change what pages is shown, which we would do using jQuery’s animate function. Such a call might look like this:
$('#slideContainer').animate({left: -800px});
This works as you would expect when the starting left value is 0 – #slideContainer will end with a value of -800px. The problem arises when we try to adjust the left value when its not starting at 0. For instance, if we were looking at the second page, #slideContainer would have a left value of -800px and the second page would be shown. If we then wanted to move to the third page, meaning left needs a value of -1600px, we would expect this to work:
$('#slideContainer').animate({left: -1600px});

In jQuery 1.2.1 or later this will work as you would expect, namely #slideContainer’s left is set to -1600px. However, in jQuery 1.2 values beginning with + or – are interpreted as relative values, which means that animate call would be interpreted as “subtract 1600px from the left of #slideContainer.” If left started at -800px, it would end at -2400px instead of -1600px as we intended.

To workaround this, our code was calculating how much the div needed to move relative to its current position and passing that value to the animate function instead. When we upgraded jQuery, this resulted in the pages sliding to arbitrary positions. To fix it, we stopped calculating the relative movement needed and simply pass the desired left value.

Note: you can still use relative offsets in new versions jQuery. Just use += and -= instead.

For the advanced readers, this bug was identified as ticket #1607, and fixed in changeset 3299 by John Resig.

This is one of many small bug fixes between versions of jQuery that have caused us to dig back through old code. I’ll be posting more as we find them. The takeaway for me is that you should always include a specific version of jQuery (don’t ever include jquery-latest.js from Google Code) and make sure to test thoroughly whenever you’re upgrading to a new version of jQuery.

We’ve identified 10 ways in which normal HTML forms fall short, and dug up the Javascript and CSS code you’ll need to fix them. Although the best enhancements are so intuitive as to be unnoticed, rest assured your visitors would thank you if they knew.

Note: Many of the solutions in this list depend on jQuery, our javascript framework of choice.

Combo Boxes

For those unfamiliar, a Combo Box is a combination of a text box and a list box. It allows the user the option of selecting from a list of predefined items, or entering a new item of their choice. Your browser’s address bar is a perfect example.

Its an elegant solution to a common problem, yet the combo box was somehow left out of HTML’s form elements.

Enter Sexy Combo, a jQuery plugin which provides a seamless solution. Users without javascript will simply encounter a normal select element.

Progress Bars For Uploads

The standard file input frustrates users with its awkwardness and lack of information. Furthermore, not being able to upload asynchronously results in a lot of wasted time.

To be fair, providing information on an ongoing upload is trickier than it might sound. Thankfully, SWFUpload provides a very clean solution that will convert your standard file inputs into a very flexible and asynchronous file uploader complete with a progress bar.

Note: As the name implies, SWFUpload uses an invisible Flash movie to actually perform the upload. As such, your users will need Flash as well as javascript enabled to take advantage.

Date Selection

Using a standard text input for a date leads to all manner of formatting issues, and using 3 select boxes is cumbersome. Desktop apps have a great solution – the date picker, which is to say a pop-up calendar.

jQuery UI’s Datepicker plugin is a perfect solution.

Note: The download page is for the entire jQuery UI library, but will allow you to download only what you want. I’d recommend only downloading the Datepicker with Packed compression, as the library is quite large.

Time Selection

Time selection in a normal HTML form has the same problems as date selection, but it lacks a uniform solution. We’ve provided 2 implementations, so that you can decide which is more appropriate for your audience.

Time Entry is a jQuery plugin that is simple and very customizable. Its normal behavior is to provide a text box where the user can use the arrow keys to quickly set the hour, minute, and am/pm settings. Its similar to how you set the time in Windows, so it should be intuitive for most visitors.

ClockPick is a more creative, but less traditional solution. If you’re generally comfortable with creative inputs, its a fantastic interface.

Color Selection

Color selection might not apply to every app, but when you need it the native options leave you out in the cold. There’s only a handful of visitors who would know what a hex code is, and even fewer who have their favorites memorized.

ColorPicker is a very nice solution, which provides a color picker similar to that in Adobe Photoshop.

Input Masking / Validation

Input masking is when a text box has static characters already included, and the cursor moves intelligently. For example, a text box for a social security number should already have the dashes, and after you enter the first three numbers the cursor should move past the first dash. Furthermore, it shouldn’t allow anything but numbers to be entered.

Input validation is checking to see if the value the user entered falls within the boundaries. In our social security number example, if the number entered isn’t exactly 9 digits, its not valid.

Note: Client-side validation can be easily overridden by a malicious visitor, so you’ll need to sanitize and validate your data server-side as well.

The Masked Input jQuery plugin can implement both of these features for us. It will let you define any custom mask, and you can use its “completed” callback function to flag the inputs as valid.

Better Support for Defaults

HTML inputs do allow for default values, but its nice to have them disappear when the input gains focus, and reappear on blur if the user hasn’t entered anything.

The aptly named Default Values plugin does exactly that.

AJAX Form Submission

Submitting forms can be a great use of AJAX, particularly if you have a series of forms which are affected by the user entered values (i.e. a wizard). Its also a nice way to break a long form into stages to decrease abandonment.

The jQuery Form Plugin is an easy way to convert your current forms to AJAX forms while preserving their functionality for users without Javascript. If you are feeling creative or want to write something more customized, jQuery’s serialize function will get you almost all the way there.

Automatically Growing Textareas

If you’ve used Facebook or Basecamp, you’ve probably noticed that the textareas get longer when you’re running out of space. Its aesthetically pleasing and very convenient.

Here’s a jQuery plugin to add the same behavior to your textareas.

Spin Buttons

A spin button is a text box with up/down arrows, allowing the user to easily “nudge” a numeric value up or down. Like a combo box, the user can still type in their own value.

They are most useful when the range of possible values is fairly small – for example selecting the number of diners in a reservation.

The jQuery Spin Button plugin is a nice implementation of this control.

One More Thing

Each of these ten solutions requires at least one external javascript library, and some require stylesheets. Implementing all ten would be great, but including a bunch of external javascript / css files can drastically increase the load time of your page.

Therefore, we recommend you do 2 things:

1. Concatenate your Javascript and CSS files as much as makes sense.
2. Compress them using Dean Edward’s packer and CSSDrive’s CSS Compressor, respectively.

Also, if you know of any scripts that we missed here let us know in the comments. Thanks for reading!