【jQuery】フォーム全体の変更を監視

Tweet

フォームの入力値変更を感知したい場合

$('input').change(function() {
});

$('select').change(function() {
});

などと、一つ一つ書くのが面倒なときがあります。
そういうときは、以下のようにするとフォーム全体の変更を感知できるようになります。

<form action="" name="testForm" method="post">
...略...
</form>

<script>
$('form[name=testForm]').change(function(e) {
    var target = $(e.target);
    var type = target.attr('type');
    var name = target.attr('name');
    var val = target.val();
    console.log(type, ':', name, ':', val);
});
</script>

これで「testForm」という名前のフォーム全体に対して、要素の変更を感知できるようになります。
「input type」やセレクトボックス、チェックボックス、ラジオボタンなどによって処理を変えたい場合は、「type」を見て「switch case」などで処理を分岐させると良いでしょう。

Tweet