押されたtype="submit"なinputタグを検出しつつAjax送信する

inputタグのtype="submit"を使うと選択したボタンをsubmit時にname=valueでパラメータとして送信してくれる。ただしjQueryのイベントではこれを拾うことができないらしい。サーバーサイドで押されたボタンに応じて処理を切り分けるようなケースもあるので対策を考える。

<form id="sampleForm">
  <input id="selectedBtn" type="hidden" name="" value="anystring">
  <input type="submit" name="hoge1" value="fuga1">
  <input type="submit" name="hoge2" value="fuga2">
  <input type="submit" name="hoge3" value="fuga3">
</form>

押されたボタンのname属性が欲しいのでsubmitの前に発生するclickイベントを利用し、事前にhiddenタグにセットする。valueじゃなくてnameにセットする点に注意。

    //いずれかのsubmitボタンが押されたのを検出
    $(document).on('click', '#sampleForm input[type=submit]', function(event) {
        //hiddenタグのname属性に選択されたボタン名をセット
        $('#selectedBtn').attr('name',$(this).attr('name'))
        return true;
    });

次にsubmitイベントを拾ってAjaxに切り替える。

    $(document).on('submit', '#sampleForm', function(event) {
        //TODO AJAXによるSubmit処理を書く。以下は適当。
        event.preventDefault();
        var $form = $(this);
        $.ajax({
            url:$form.attr('action'),
            type:$form.attr('method'),
            data:$form.serialize()
        });
    });

$form.serialize()ではtype="submit"なinputタグはdataとして取得されないようなので、form配下のinputタグがsubmitボタン含めて全て送信されてしまうようなことはない。

ただし、
Ajaxで送信するならsubmit使わないでonClickだけでやればいいんじゃないか、という話ではある。