jqueryでresetメソッドを使用してフォームのコンテンツをリセットする方法-フロントエンドQ&A-php.cn

jqueryでresetメソッドを使用してフォームのコンテンツをリセットする方法

PHPz

リリース： 2023-04-07 14:06:34

オリジナル

2074 人が閲覧しました

フロントエンド開発では、フォームは不可欠な要素であり、フォームでは、フォームの内容をクリアまたはリセットする必要がある場合があります。 jQuery は、この要件を満たすフォームのリセット() メソッドを提供します。

jQuery フォームのリセット() メソッドとは

jQuery フォームのリセット() メソッドは、フォームのコンテンツをリセットするために使用されます。フォーム内のすべての入力値、テキストエリア値、選択値が初期値にリセットされます。

構文:

jQuery の使用:

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

ログイン後にコピー

JavaScript の使用:

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

ログイン後にコピー

パラメーターの説明:

セレクター: フォームセレクターをリセットします。
formId: リセットするフォームの ID。

例:

jQuery の使用:

HTML コード:

<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 コード:

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

ログイン後にコピー

JavaScript メソッドの使用:

HTML コード:

<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 コード:

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

ログイン後にコピー

達成効果:

[リセット] ボタンをクリックすると、フォーム内のすべてのコンテンツがクリアされます。

Note

jQuery フォームのリセット() メソッドは、フォーム内のすべての値をデフォルト値にリセットするだけであり、フォームのエラーメッセージはクリアされず、フォームもリセットされません。入力ボックスのフォーカス状態とスクロールバーの位置。
jQuery フォームのリセット() メソッドを使用する場合、フォームのデフォルトの送信動作を防止したい場合は、event.preventDefault() メソッドを使用する必要があります。
フォームにリセットボタンが含まれている場合、すべてのフォーム要素の値がクリアされることに注意する必要があります。クリックイベントでevent.preventDefault()を使用すると、デフォルトの動作を防ぐことができます。

概要

jquery フォームのリセット() メソッドはフォームをクリアするために使用されます。これは使いやすく、フォームのコンテンツをすばやくリセットできます。ただし、実際に使用する場合は、ニーズに合わせてより適切に適用できるように、いくつかの制限と注意事項に注意する必要があります。

以上がjqueryでresetメソッドを使用してフォームのコンテンツをリセットする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。