jQuery でフォーム フィールドをクリアする
Habdul Hazeez
2023年6月21日
jQuery
jQuery Form
jQuery を使用してフォーム フィールドをクリアするには、値を空の文字列に設定します。
この記事では、使用できる 2つの方法について説明します。 前者はチェックボックスを考慮しますが、後者は考慮しません。
CSS セレクターを使用してフォーム フィールドをクリアする
CSS セレクターの組み合わせを使用して、jQuery の HTML フォーム フィールドをクリアできます。 ここで、CSS セレクターは、ラジオ ボタンやチェックボックスなどの一部のフォーム フィールドを除外します。
これにより、追跡が困難なバグにつながる可能性のある value 属性の偶発的なクリアランスが防止されます。 以下は HTML フォーム フィールドをクリアし、チェックボックスの値はそのまま残します。
それらがチェックされている場合でも、コードはそれらのチェックを外します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>01-jQuery-clear-form</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
form {
width: 50%;
margin: 2em auto;
font-size: 1.2em;
}
.form_row {
margin-bottom: 1em;
}
</style>
</head>
<body>
<main>
<form id="bio_data_form">
<div class="form_row">
<label for="first_name">First name</label>
<input id="first_name" type="text" name="first_name">
</div>
<div class="form_row">
<label for="last_name">Last name</label>
<input id="last_name" type="text" name="last_name">
</div>
<div class="form_row">
<label>
<input type="checkbox" name="engineer" value="engineer" value="engineer"> I am an engineer
</label>
</div>
<div class="form_row">
<button class="clear_form">Clear form</button>
<input type="submit" name="submit_form" value="Submit form" class="submit_form">
</div>
</form>
</main>
<script>
$(document).ready(function() {
$('.clear_form').click(function(e) {
e.preventDefault();
$(':input', '#bio_data_form')
.not(':button, :submit, :reset, :hidden')
.prop('checked', false).prop('selected', false)
.not(':checkbox, :radio, select').val('');
});
});
</script>
</body>
</html>
出力：
jQuery .find() メソッドを使用してフォーム フィールドをクリアする
jQuery .find() メソッドは、HTML フォーム要素を検索できます。 そこから、それらの値をクリアできます。 最初の例とは異なり、フォームにはチェックボックスがありません。
コードはテキスト入力と textarea 要素をターゲットにしますが、必要に応じてさらに要素を追加できます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-jQuery-clear-form</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
form {
width: 50%;
margin: 2em auto;
font-size: 1.2em;
}
.form_row {
margin-bottom: 1em;
}
label, input:not([type="submit"]), textarea {
display: block;
width: 50%;
}
</style>
</head>
<body>
<main>
<form id="bio_data_form">
<div class="form_row">
<label for="first_name">First name</label>
<input id="first_name" type="text" name="first_name">
</div>
<div class="form_row">
<label for="last_name">Last name</label>
<input id="last_name" type="text" name="last_name">
</div>
<div class="form_row">
<label>Who are you?</label>
<textarea></textarea>
</div>
<div class="form_row">
<button class="clear_form">Clear form</button>
<input type="submit" name="submit_form" value="Submit form">
</div>
</form>
</main>
<script>
$(document).ready(function() {
$('.clear_form').click(function(e) {
e.preventDefault();
$(this).closest('form').find("input[type=text], textarea").val("");
});
});
</script>
</body>
</html>
出力：
チュートリアルを楽しんでいますか？ <a href="https://www.youtube.com/@delftstack/?sub_confirmation=1" style="color: #a94442; font-weight: bold; text-decoration: underline;">DelftStackをチャンネル登録</a> して、高品質な動画ガイドをさらに制作するためのサポートをお願いします。 Subscribe
著者： Habdul Hazeez
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn