jQueryでフォーム内のデータを一括で削除する



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を拡張する

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.


Summary

こういう関数を作っておけば、色々な場面で使い回しが出来ますね。

今回はフォームの値を一度にリセットする方法でしたが、フォームの値を配列で一度に取得する方法も紹介しています。

jQueryでフォーム内のデータを配列で取り出す

「フォーム数が多くて、値を空にするのが面倒 ...」っと思った人はゼヒゼヒ参考にしてください!

 

この記事のカテゴリ
プログラミング

この記事のタグ