OnReturn 1.0

Summary

OnReturn allows you to specify an alternative action/function when a form is submitted using the enter/return key (rather than clicking a submit button). This is especially helpful in situations where there are multiple submission areas on a page, but only one all-encompassing form (yes, I'm glaring at you .NET).

Updates

September 14, 2008: OnReturn version 1.0 is released to the public.

Basic Usage

Note: The element(s) you apply OnReturn to should be actual form elements and not the form itself.

$(element).onReturn(callback);

Available Options

callback (required)

A function that specifies the behaviors that you want to trigger when the enter/return key is pressed.

Examples

Display an alert

Note: Hitting enter/return while the field has keyboard focus will do something different than clicking the Submit button.

<form action="index.php">
  <input type="text" name="name" value="Type something ↵
  here!" />
  <input type="submit" value="Submit" />
</form>

<script type="text/javascript">
  $("form :text").onReturn(function() {
    alert("You need to click the Submit button to ↵
    submit the form!");
  });
</script>

Perform a GET submission without actually submitting

Note: We'll also show a warning to tell the user they're leaving the site.

<form action="http://www.google.com/search">
  <label for="txtSearch">Search</label>
  <input type="text" id="txtSearch" name="q" />
</form>

<script type="text/javascript">
  $("form :text").onReturn(function() {
    alert("You will now be taken to Google");
    window.location = $(this).parent().attr("action") + ↵
    "?q=" + $(this).val();
  });
</script>

Additional Notes

• You can get pretty much the same effect by using jQuery's built-in submit function… but OnReturn was written out of necessity for a .NET environment where only one all-encompassing form was present on the page.