Recently we discussed how you can use mouse events with jQuery, and in this article we will discuss form events. jQuery provides several form events to bind to. The form events are the same standard JavaScript events, but with added support by jQuery.
.blur()
The blur event is triggered when the element loses focus. This event is commonly used with input elements, but can be used with other HTML elements. An element can lose focus when the mouse is clicked outside of the element or through keyboard commands, such as, tabbing out of an input element.
<html>
<head>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#name").blur(function () {
alert("Focus lost");
});
});
</script>
</head>
<body>
<form id="form1">
<input name="name" id="name" type="text" />
</form>
</body>
</html>
In the above example, a blur event has been attached to the input element, “name”. When focus changes on this element, either by clicking anywhere outside of the element or hitting the tab key, an alert box is fired.
.change()
Blur is different from a change event because the blur event fires when focus is lost. The change event will fire only when a change is made to the element. So if you want to only fire the event when the element changes, it is better to use the change event which has been discussed before. Unlike the blur event, the change event only works with the input, textarea, and select elements. For the text (input type=”text”) and textarea element, the event fires when the element loses focus and has changed. On the select element (dropdowns/lists), checkboxes (input type=”check”), and radio buttons (input type=”radio”), the event fires as soon as a selection is made.
<html>
<head>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#name").change(function () {
alert("Change has been made");
});
$("#check").change(function () {
alert("Change has been made");
});
});
</script>
</head>
<body>
<form id="form1">
<input name="name" id="name" type="text" />
<input name="check" id="check" type="checkbox" />
</form>
</body>
</html>
In the above example, we have two form elements, a text field and a checkbox. Both have a change event on them. When the text box is changed, it fires the event. If you just click in and out of the text box without making a change, the event is not fired. On the checkbox, as soon it is checked or unchecked, the event fires.
.select()
The select event fires when text is selected in an input element that’s type is set to text or a textarea element.
<html>
<head>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#text").select(function () {
alert("Text selected");
});
});
</script>
</head>
<body>
<form id="form1">
<textarea name="text" id="text"></textarea>
</form>
</body>
</html>
In the above example we have a textarea element. The textarea element has the select event bound to it. You can type in there, but when you select the text, the event is fired which displays an alert box.
.submit()
The submit event is one of the more popular form elements (right behind the change event). The submit event attaches to the form and not an element on the form. When the form is submitted using a standard form submission element (button, input (type button or image), and enter (in some cases), the submit event is fired.
<html>
<head>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#form1").submit(function () {
alert("Form submitted");
});
});
</script>
</head>
<body>
<form id="form1">
<input name="name" id="name" type="text" />
<input name="submit" id="submit" type="submit" />
</form>
</body>
</html>
The above example has a submit button on the form and the submit event is attached to it. When the submit button is clicked, the event fires to display an alert box.
The JavaScript submit event is fired before the form’s action event. This allows you to before certain functions before the form is sent to the form’s processor. You could use it to perform validation, ask a question to make sure they want to submit the form, etc. You could even use it to perform an AJAX submit on the form.
If you want to cancel the form’s submission before it is sent the form’s processor, you can return false or use the .preventDefault() action on the event object. Here are two examples:
$("#form1").submit(function (e) {
e.preventDefault();
});
$("#form1").submit(function () {
return false;
});
You can even trigger a form submit from another function. You do this by calling the .submit() action on the form.
$("#button1").click(function () {
$("form1").submit();
});
Conclusion
jQuery provides several ways to help with forms. You can use this to help with form validation, AJAX style lookups, and many other enhancements to give your forms greater functionality.
