Form Events

Events are occurrences that impact objects, like clicking a button or opening/closing a form, prompting actions to be executed. The HTMLFormElement interface symbolizes a form element within the DOM, offering access and modification options for various form aspects and components. Form events are standard JavaScript events, augmented by jQuery for added support. They're triggered when form controls gain or lose focus, or when users modify control values, such as typing in a text input or selecting an option in a dropdown.

  1. submit
  2. select
  3. change
  4. focus
  5. blur

blur() event

The blur event is activated when an element loses its focus, typically used with input elements but applicable to other HTML elements as well. Focus is lost when the mouse is clicked outside the element or through keyboard actions, like tabbing away from an input field. This event is particularly useful for validating input data or performing actions when a user interacts with an element and then shifts focus elsewhere.

$("#txtInput").blur(function () { alert("Control lost focus"); });
<input name="name" id="txtInput" type="text" />
run this source code Browser View
Full Source
<html> <head> <title>jQuery blur</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#txtInput").blur(function () { alert("Control lost focus"); }); }); </script> </head> <body> <input name="name" id="txtInput" type="text" /> </body> </html>

submit() event

The submit event is a commonly used form event, second in popularity to the change event. By using the submit() method, you can attach an event handler that executes a function when the submit event is triggered. This event takes place whenever a form is submitted, enabling you to manage actions like form validation or data processing before the form is actually submitted to a server.

$("#myForm").submit(function () { alert("Form submitted"); });
<form id="myForm"> <input name="submit" id="submit" type="submit" /> </form>
run this source code Browser View
Full Source
<html> <head> <title>jQuery Submit</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#myForm").submit(function () { alert("Form submitted"); }); }); </script> </head> <body> <form id="myForm"> <input name="submit" id="submit" type="submit" /> </form> </body> </html

select() event

In jQuery, there is no select() method that corresponds to a "select" event. Instead, the select() method in jQuery is used to select elements in the DOM based on a given selector.

The "select" event in jQuery is used to capture the selection of text within an input or textarea element. This event is triggered when a user highlights or selects text within the input or textarea using their mouse or keyboard. Here's an example of how you might use the "select" event in jQuery:

$(document).ready(function() { $("input[type='text']").on("select", function() { console.log("Text selected: " + $(this).val()); }); });

In this example, when the user selects text within an input of type "text", the "select" event is triggered, and the selected text is logged to the console.

change() Method

The change() method in jQuery is used to bind an event handler that gets executed when the value of an element changes. This event is fired when a user interacts with an input element and modifies its value, such as by typing text into a textbox, selecting a different option in a dropdown, or changing the state of a checkbox.

$("select").change(function(){ var selectedColor = $(this).find(":selected").val(); alert("You selected - " + selectedColor); });
<select> <option>Red</option> <option>Blue</option> <option>Green</option> </select>
run this source code Browser View
Full Source
<html> <head> <title>jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("select").change(function(){ var selectedColor = $(this).find(":selected").val(); alert("You have selected - " + selectedColor); }); }); </script> </head> <body> <select> <option>Red</option> <option>Blue</option> <option>Green</option> </select> </body> </html>

focus()

The focus() method in jQuery serves two purposes:

  1. Triggering the Focus Event: If you call focus() on an element, it triggers the focus event for that element. This event occurs when an element gains focus, usually due to user interaction, like clicking on an input field.
  2. Attaching a Function to the Focus Event: You can also use focus() to attach a function that runs when the focus event is triggered for the specified element. This function executes when the element gains focus, allowing you to perform actions or validations at that point.
$("input").focus(function(){ $(this).css('background-color', 'pink'); });
Enter: <input type="text" size="30"/>
run this source code Browser View
Enter:
Full Source
<html> <head> <title>jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input").focus(function(){ $(this).css('background-color', 'pink'); }); }); </script> </head> <body> Enter: <input type="text" size="30"/> </body> </html>

Conclusion

jQuery offers form events like submit(), change(), and focus() to facilitate interactive behavior with form elements. These events are triggered when users submit forms, modify input values, or focus on elements, respectively. By using these events, you can enhance user experience and control form-related actions effectively.






Related Topics
  1. jQuery Events Handling
  2. Mouse Events in jQuery
  3. jQuery Keyboard Events
  4. How to reload/refresh a page using JavaScript/jQuery