jQuery form events detail guide with example
jQuery provides a range of events that can be used to interact with forms on a web page. Here are some of the most commonly used jQuery form events:
- .submit(): The submit event is triggered when a form is submitted. This can be done either by clicking on the submit button or by pressing the Enter key. You can use the submit event to perform any necessary validation on the form data before it is submitted.
- .focus(): The focus event is triggered when an element in the form receives focus. This can be used to change the appearance of the element or to display a tooltip or hint.
- .blur(): The blur event is triggered when an element in the form loses focus. This can be used to validate the data entered in the form element and to update the appearance of the element.
- .change(): The change event is triggered when the value of an input element is changed. This can be used to validate the input and update the form as necessary.
- .select(): The select event is triggered when the user selects text in an input element. This can be used to provide additional information or to perform an action when text is selected.
- .reset(): The reset event is triggered when a form is reset. This can be used to clear any data entered in the form and to reset the form to its initial state.
Overall, jQuery provides a powerful set of events that can be used to create dynamic and interactive forms on a web page.
jQuery submit() event
$(document).ready(function() {
$("form").submit(function(event) {
// Prevent the form from submitting normally
event.preventDefault();
// Get the form data
var formData = $(this).serialize();
// Submit the form using Ajax
$.ajax({
type: "POST",
url: "submit.php",
data: formData,
success: function(response) {
// Display the response message
$("#message").html(response);
}
});
});
});
Overall, the .change() event is a useful tool in jQuery for triggering actions when the value of an input, select, or textarea element is changed.
In this example, we use the submit() event to intercept the form submission and send the form data to the server using Ajax. The event.preventDefault() method is used to prevent the form from submitting normally. Then, we use the $(this).serialize() method to get the form data and pass it to the server using the $.ajax() method. Finally, we display the response message in an element with the ID "message".
jQuery focus() event
The jQuery focus() event is used to bind an event handler to the "focus" event of the selected elements. The focus() method can be used with any HTML element that accepts focus, such as form fields (input, textarea, select), links, and buttons.
The syntax for the focus() method is as follows:
$(selector).focus(handler);
Here, the selector is the HTML element to which the event handler should be bound, and the handler is the function to be executed when the event is triggered.
For example, the following code binds a focus() event handler to all input elements on the page, which changes the background color of the input element to yellow when it receives focus:
The focus() method can also be used to trigger the focus event of an element, like this:
$(selector).focus();
In this case, the focus() method triggers the focus event of the selected element(s) without any event handler function being bound to it.
You can also use the focus() event to validate form fields. For example, you could use it to ensure that a user enters a valid email address into an email input field:
<!DOCTYPE html>
<html
<head>
<title>jQuery focus() event example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.mydiv {
font-family: sans-serif;
padding: 40px;
}
</style>
</head>
<body>
<div id="mydiv">
<p>Enter invalid email and click outside to see effect</p>
<input type="email" id="emailInput" />
<div id="emailError" style="display: none;">Please enter a valid email address.</div>
</div>
<script>
$(document).ready(function () {
$("#emailInput").focus(function () {
$("#emailError").hide();
});
$("#emailInput").blur(function () {
var email = $(this).val();
var pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
if (email.match(pattern)) {
// email is valid
} else {
$("#emailError").show();
}
});
});
</script>
</body>
</html>
jQuery .blur() event
$(selector).blur(function() {
// code to be executed
});
Here, the selector refers to the element on which you want to attach the .blur() event. The function passed as a parameter to the .blur() event is executed when the element loses focus.
You can also use the .blur() event in combination with other events, such as the .focus() event, to create more complex behavior. For example, you might want to disable a button until a user has entered a value in an input field, and then re-enable the button when the input field loses focus. Here's an example:
$("input").focus(function() {
$("button").prop("disabled", true);
});
$("input").blur(function() {
if ($(this).val() !== "") {
$("button").prop("disabled", false);
}
});
In this code, the .focus() event is attached to all input elements, disabling a button when an input field gains focus. The .blur() event is also attached to all input elements, but this time it checks whether the input field has a value. If it does, the button is re-enabled.
jQuery .change() event
The jQuery .change() event is triggered whenever the value of an input element, select element or textarea element is changed. This event is useful in situations where you want to take an action when the user changes the input, select or textarea value.
The basic syntax for the .change() event is:
$(selector).change(function() {
// code to be executed when the value of the element is changed
});
Here, the selector is the element(s) on which you want to bind the .change() event.
The .change() event can also be used to trigger a function when a select element or textarea element's value is changed. For example, if you have a select element with an id of mySelect and you want to trigger a function whenever the user selects a new option, you can use the following code:
$("#mySelect").change(function() {
// code to be executed when the user selects a new option
});
Similarly, you can bind the .change() event to a textarea element like this:
$("textarea").change(function() {
// code to be executed when the value of the textarea is changed
});
