フォームのクリアボタンの作り方のご紹介

更新日:2021年1月27日

フォームの値を取得したい時に使うjQueryのval()ですが、実は変更する時にも使うことが出来ます。
この記事ではフォームのクリアボタンの作り方をご紹介します。
jQueryのval()で簡単実装です!

HTMLで下記のように書きます。

氏名

氏名を入力するテキストボックスと、「クリアする」と記述されたボタンを表示するHTMLになります。

次にjQueryの記述は下記になります。

$(function() {
	$(".clearbtn").click(function() {
		$(".name").val("");
	});
});

「クリアする」というボタンをクリックすると、氏名を入力するテキストボックスの値を空にするという記述になります。

完成すると下記のように実装されます。

氏名

シンプルな記述ですので、分かりやすいかと思います。
是非ご活用下さい!