jQuery :reset selector
the jQuery :reset selector is used to select input elements with a type of “reset” within a form. The “:reset” selector targets the HTML input element with the type attribute set to “reset”. This type of input element is typically used to reset or clear form fields to their initial values when clicked.
Here’s the basic syntax of the :reset selector:
$(":reset")Example:
<!DOCTYPE html>
<html>
<head>
<title>jQuery :reset Selector Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" value="John Doe">
<br>
<label for="email">Email:</label>
<input type="text" id="email" name="email" value="[email protected]">
<br>
<input type="reset" value="Reset Form">
</form>
<script>
$(document).ready(function() {
// Select the reset button within the form
var resetButton = $("#myForm :reset");
// Add a click event handler to the reset button
resetButton.on("click", function() {
console.log("Form fields have been reset!");
});
});
</script>
</body>
</html>In this example, we have a form with two text input fields (Name and Email) and a reset button. We use the :reset selector to target the reset button, and then we add a click event handler to it. When the reset button is clicked, the message “Form fields have been reset!” will be logged to the console.
The :reset selector is useful when you want to perform specific actions or behaviors when the reset button within a form is clicked. It can be used to customize the behavior of the reset button based on your application’s requirements.