jQuery を使用して HTML フォームをリセットする
-
jQuery で
trigger()メソッドを使って HTML フォームをリセットする -
jQuery フォームオブジェクトを作成し、JavaScript の
reset()メソッドを使用して 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() メソッドを使用してフォームをリセットします。出力を参照してください：
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook