jQueryでフォーム内のデータを一括で削除する方法の紹介です。
フォーム内のテキストを1から入力し直すために " クリアボタンで全て一発消去！" というケースはあまりないですが、非同期通信(Ajax)でデータを送信(POST)した後にフォーム内の入力データを消去(リセット)する場面は多々あります。
フォーム内のデータを消去することは難しいことではありませんが、フォームの数が多いと同じような処理を書くことになり、コードが長くなって下記の様に見通しが悪くなります。
// POST後にフォームの値を空にする一例
// クリック イベント
$('#btnSubmit').on('click', function(ev) {
ev.preventDefault();
//何らかPOSTの処理
$.post('url',[data: 'something'], function(){
//フォームのvalueを空にする処理
$('#formId1').val("");
$('#formId2').val("");
$('#formId3').val("");
$('#formId4').val("");
....
});
});
ということで、jQueryを拡張してフォーム内のデータを一括でリセットする関数を作ってみました。
jQueryにはserializeArray()という便利な関数があるので、それを利用してresetFormという関数を作りました。このserializeArray()を使うと、フォーム内のname属性が配列で返ってきます。
// extends jquery
$.fn.resetForm = function() {
var arr = this.serializeArray();
if (!arr.length == 0) {
$.each(arr, function() {
if ($('#' + this.name).is(':checked')) {
// for check box
$('#' + this.name).prop('checked', false);
} else if ($('input[name=' + this.name + ']:checked').is(':checked')) {
// for radio box
$('input[name=' + this.name + ']:checked').prop('checked', false);
} else {
$('#' + this.name).val("");
}
}); // ! $.each()
return true;
} else {
return false;
}
};
// 使い方
// $('#formId').resetForm();
上のスニペットはserializeArray()で返ってきたname属性の配列を$.eachで回してインプットのvalueを空にしています。
( text, check, radioに対応 )
ここにサンプル用のフォームを用意しました。
( * inputのnameとidが同じ名前になっていることに注意してください )
<form class="form-group" id="formId" >
<label for="username">username:</label>
<input type="text" class="form-control" id="username" name="username" value="" />
<label for="email">e-mail:</label>
<input type="text" class="form-control" id="email" name="email" value="" />
<label for="pass">password:</label>
<input type="password" class="form-control" id="password" name="password" value="" />
<!-- submit button -->
<span id="submitForm" class="btn btn-primary">login</span>
</form>
下のスニペットはボタンが押された時にフォームの値をリセットする処理です。上記で作ったresetForm関数を使っています。
$('#submitForm').on('click', function(ev){
ev.preventDefault();
/*
* do somethinig
*/
// フォームの値をクリア
$('#formId').resetForm();
});
*Demo
See the Pen oxppVd by cupof (@cupof-github) on CodePen.
こういう関数を作っておけば、色々な場面で使い回しが出来ますね。
今回はフォームの値を一度にリセットする方法でしたが、フォームの値を配列で一度に取得する方法も紹介しています。
「フォーム数が多くて、値を空にするのが面倒 ...」っと思った人はゼヒゼヒ参考にしてください！
