jQuery Form Events
Dec 05, 2012
Table of contents:
Last week we began looking at jQuery Mouse Events and how they can be triggered on certain actions or conditions. Events are an integral part of adding interactivity to your websites using jQuery.
This week we will be looking at specifically Form Events and how you can use jQuery to create better forms on your websites. jQuery allows you to do some very powerful things with form interaction. For example, it is now expected that a form has inline validation so a user has instant feedback as to whether their input was accepted or not. Using jQuery with forms makes this easy to accomplish.
Here is an overview of the most common Form Events that you will be using in jQuery.
Blur
The Blur Event is called when you move away from a focused element. This is could be useful if you needed to validate the data a user has entered into a field once you know they have finished typing.
For example, to ensure that a field has not been left blank, you could do something like this:
$("#email").blur(function () {
if (!this.value) {
$("#email").after("<span>You need to enter your email address</span>");
}
});Change
The Change event is useful for listening for when an element has changed. For example, you might want to confirm a user’s selection.
The Change event is fired straight away for Select boxes, Checkboxes and Radio buttons. On Inputs and Textareas the event will be fired once the element loses focus or the user clicks away.
For example:
$("#gender").change(function () {
$("span").text("You have selected " + $("option:selected").text());
});Focus
The Focus Event will be fired when an element gains focus. This typically limited to Inputs, Textareas, Selects and Links.
$("#email").focus(function () {
$(this).css("background-color", "#db2929");
});
$("#email").change(function () {
$(this).css("background-color", "#659d32");
});Note: In the example above I wouldn’t recommend actually changing the colour of the box to red before the user has entered their data. Also it would be better to toggle a class rather than change the CSS property, this is just for illustration purposes.
Select
The Select Event is useful if you want to trigger an event when the user selects text within a text input or a textarea. Simply clicking on the element will not fire this event. The user must actually have to select text.
$("#textarea").select(function () {
alert("You selected some text!");
});Submit
The Submit Event will be fired when the user submits a form and therefore can only be attached to forms. This is useful for validating all of the fields of a form before the data of the form is sent off.
$("form").submit(function () {
alert("Thank you for submitting the form");
});The Submit Event is also useful if you want to make Ajax requests. By using the Submit Event, you can listen for the form being submitted, and then intercept the action to make your Ajax request.
Conclusion
There aren’t many Form events, but they can be combined to create some very powerful effects. Whilst jQuery makes validating forms extremely easy, I think one of the best opportunities is how easy it makes Ajax for submitting and retrieving content from a server without the user having to submit the page. Come back next week to see how you can use jQuery to make Ajax requests.
