29 回閲覧されました

みなさんこんにちは、jonioです。

フォームを閉じた時にフォームの内容をjQeuryを使って消す方法として下記があります。

$('#checkInModal').on('hidden.bs.modal', function() {
    $(this).find('form').trigger('reset');
});

しかしフォームを閉じても消せない場合に遭遇しました。

何とか解決できましたが同じ状況で苦しむ人がいるはずなのでこの記事を残します。

状況

複数の人に対して同じフォームを使ってデータの送信をしようとしました。

ある人のフォームを入力して送信せずフォームを閉じてからまたフォームを表示して入力して送信すると前に入力したデータも一緒に送信されていました。

複数に対して同じフォームを使った場合は恐らく前に入力した情報が残ったままになりresetメソッドではリセットできないみたいです。

対処

知っていれば簡単です。

コードを下記にします。

$('#modal').off('click');

$('#modal').on('click', function(e) {

      //フォームの値を送信する処理

}

1行目を書く事でフォームの内容をリセットすることができます。