HOWTO · jQuery
jQuery を使用して HTML フォームをリセットする
このチュートリアルでは、jQuery を使用して HTML フォームをリセットする方法を示します。
jQuery には JavaScript の reset() メソッドのようなメソッドはありませんが、jQuery の trigger() メソッドを使用して HTML フォームをリセットできます。このチュートリアルでは、trigger() メソッドを使用して jQuery で HTML フォームをリセットする方法を示します。
jQuery で trigger() メソッドを使って HTML フォームをリセットする
trigger() メソッドは、選択した要素で指定されたイベントハンドラーをトリガーできます。このメソッドを reset パラメーターとともに使用して、HTML フォームをリセットできます。
フォームをリセットするための trigger() メソッドの構文は次のとおりです。
$("Form").trigger("reset");
Form がフォームのセレクターである場合、id、class、または form キーワードにすることができます。
例を試してみましょう：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ResetForm Using JQuery</title>
</head>
<body>
<form action="" method="post" id="DemoForm">
<label>Name:</label>
<input type="text" name="name">
<br><br>
<label>ID:</label>
<input type="text" name="id">
<br><br>
<label>Address:</label>
<input type="text" name="address">
<br><br
<label>Salary:</label>
<input type="number" name="salary">
<input type="submit" value="Submit">
</form>
<br>
<button type="button" id='ResetButton'>Reset Form</button>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("#ResetButton").click(function(){
$("#DemoForm").trigger("reset");
});
});
</script>
</body>
</html>
上記のコードは、ボタンをクリックするとフォームをリセットします。出力を参照してください：
jQuery フォームオブジェクトを作成し、JavaScript の reset() メソッドを使用して HTML フォームをリセットする
jQuery でフォームをリセットするもう 1つの方法は、フォームの jQuery オブジェクトを作成し、JavaScript の reset() メソッドを使用してリセットできることです。このメソッドの構文は次のとおりです。
$("#DemoForm")[0].reset()
ここで、[0] は jQuery オブジェクトを JavaScript オブジェクトに変換してから、reset() メソッドを適用します。
この方法については、次の例を参照してください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reset Form Using JQuery</title>
</head>
<body>
<form action="" method="post" id="DemoForm">
<label>Name:</label>
<input type="text" name="name">
<br><br>
<label>ID:</label>
<input type="text" name="id">
<br><br>
<label>Address:</label>
<input type="text" name="address">
<br><br
<label>Salary:</label>
<input type="number" name="salary">
<input type="submit" value="Submit">
</form>
<br>
<button type="button" id='ResetButton'>Reset Form</button>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("ResetButton").click(function() {
$("#DemoForm")[0].reset()
});
});
</script>
</body>
</html>
上記のコードは、jQuery オブジェクトを JavaScript に変換し、reset() メソッドを使用してフォームをリセットします。出力を参照してください：
