So verwenden Sie die Reset-Methode, um den Formularinhalt in JQuery zurückzusetzen

In der Frontend-Entwicklung ist das Formular ein wesentliches Element, und im Formular ist es manchmal erforderlich, den Formularinhalt zu löschen oder zurückzusetzen. jQuery bietet eine Form-Reset()-Methode, um diese Anforderung zu erfüllen.

Was ist die jQuery-Formular-Reset()-Methode?

Die jQuery-Formular-Reset()-Methode wird verwendet, um den Inhalt des Formulars zurückzusetzen. Dadurch werden alle Eingabe-, Textbereichs- und Auswahlwerte im Formular auf ihre Anfangswerte zurückgesetzt.

Syntax:

Verwendung von jQuery:

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

Verwendung von JavaScript:

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

Parameterbeschreibung:

• selector: Der zurückzusetzende Formularselektor.
• formId: ID des zurückzusetzenden Formulars.

Beispiel:

Verwenden Sie 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");
    });
});

Verwenden Sie JavaScript:

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();
}

Erfolgseffekt:

Klicken Sie auf die Schaltfläche „Zurücksetzen“. löscht den gesamten Inhalt des Formulars.

Hinweise

• Die jQuery-Formular-Reset()-Methode setzt nur alle Werte im Formular auf ihre Standardwerte zurück. Sie löscht weder die Fehlermeldung des Formulars noch den Fokusstatus und die Bildlaufleiste des Formulars Eingabefeld.
• Wenn Sie bei Verwendung der jQuery-Formular-Reset()-Methode das standardmäßige Übermittlungsverhalten des Formulars verhindern möchten, müssen Sie die event.preventDefault()-Methode verwenden.
• Wenn das Formular eine Schaltfläche zum Zurücksetzen enthält, müssen Sie beachten, dass dadurch die Werte aller Formularelemente gelöscht werden. Sie können event.preventDefault() für das Click-Ereignis verwenden, um das Standardverhalten zu verhindern.

Zusammenfassung

Die Methode jquery form reset() wird zum Löschen des Formulars verwendet. Sie ist einfach zu verwenden und kann den Formularinhalt schnell zurücksetzen. Bei der tatsächlichen Verwendung müssen wir jedoch einige seiner Einschränkungen und Vorsichtsmaßnahmen beachten, damit wir es besser an unsere Bedürfnisse anpassen können.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Reset-Methode, um den Formularinhalt in JQuery zurückzusetzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!