How to use reset method to reset form content in jquery

In front-end development, the form is an essential element, and in the form, it is sometimes necessary to clear or reset the form content. jQuery provides a form reset() method to meet this requirement.

What is the jQuery form reset() method

The jQuery form reset() method is used to reset the content of the form. It will reset all input, textarea and select values ​​in the form to their initial values.

Syntax:

Use jQuery:

$(selector).trigger("reset");

Use JavaScript:

document.getElementById("formId").reset();

Parameter description:

• selector: The form selector to be reset.
• formId: ID of the form to be reset.

Example:

Using jQuery:

HTML code:

<form id="myForm">
    <label for="name">Name:</label>
    <input type="text" name="name" id="name" value="Tom"><br>
    <label for="gender">Gender:</label>
    <select name="gender" id="gender">
        <option value="male">Male</option>
        <option value="female" selected>Female</option>
    </select><br>
    <label for="bio">Bio:</label>
    <textarea name="bio" id="bio">This is my bio.</textarea><br>
    <input type="button" value="Reset" id="resetButton">
</form>

jQuery code:

$(document).ready(function(){
    $("#resetButton").click(function(){
        $("#myForm").trigger("reset");
    });
});

Using JavaScript Method:

HTML code:

<form id="myForm">
    <label for="name">Name:</label>
    <input type="text" name="name" id="name" value="Tom"><br>
    <label for="gender">Gender:</label>
    <select name="gender" id="gender">
        <option value="male">Male</option>
        <option value="female" selected>Female</option>
    </select><br>
    <label for="bio">Bio:</label>
    <textarea name="bio" id="bio">This is my bio.</textarea><br>
    <input type="button" value="Reset" id="resetButton" onclick="resetForm()">
</form>

JavaScript code:

function resetForm(){
    document.getElementById("myForm").reset();
}

Achievement effect:

Clicking the Reset button will clear all content in the form.

Note

• The jQuery form reset() method only resets all values ​​in the form to their default values. It will not clear the form's error message, nor will Resets the focus state of the input box and the position of the scroll bar.
• When using the jQuery form reset() method, if you want to prevent the form's default submission behavior, you need to use the event.preventDefault() method.
• If the form contains a reset button, you need to note that it will clear the values ​​of all form elements. You can use event.preventDefault() in the click event to prevent the default behavior.

Summary

The jquery form reset() method is used to clear the form. It is easy to use and can quickly reset the form content. However, in actual use, we need to pay attention to some of its limitations and precautions so that we can better apply it to meet our needs.

The above is the detailed content of How to use reset method to reset form content in jquery. For more information, please follow other related articles on the PHP Chinese website!