シラサヤ備忘館

$.ajax()を使った時にsubmitボタンのnameが飛ばないことを知った。


少し調べてみたところjQueryを使ったときにsubmitボタンのnameが飛ばないのではなく、
そもそもjavascriptでsubmit()をするとnameが飛んでいないということを知った。


へー、そーだったっけー。
今まであんま気にしたことも無かったわあ。



$.ajax()を使ったときにsubmitの値も送りたい場合はこんな感じにすればよい。

■$.ajax()でsubmitのnameとvalueも送る

<script type="text/javascript">
<!--
$('input[type="submit"]').click(function(e) {
  var $button_name = $(this).attr('name');
  var $button_value= $(this).attr('value');
  var $form = $(this).parents('form');
  $.ajax({
    url: $form.attr('action'),
    type: $form.attr('method'),
    data: $form.serialize() + '&' + $button_name=$button_value,
    timeout: "5000",
    success: function($data) {
      alert('success');
    },
    error: function() {
      alert('error');
    }
  });
});
</script>

ちなみにこんなこともできる。

<script type="text/javascript">
<!--
$('input[type="submit"]').click(function(e) {
  var $form = $(this).parents('form');
  var $button = $form.find(':submit');
  var $button_name = $button.attr('name');
  var $button_value = $button.attr('value');
  alert($button_name);
  alert($button_value);
});
</script>

こんな書き方も。

<script type="text/javascript">
<!--
$(window).submit(function() {
  var $form = $(this);
  var $button = $form.find(':submit');
  var $button_name = $button.attr('name');
  alert($button_name);
});
</script>

上記の最初2つはsubmitボタンをクリックしたイベントを、
最後のはformのsubmitイベントをキャッチしている。

それぞれキャッチするイベントは違っても一応submitの情報やform要素の情報を取得できている。


ちなみに上記3つはIDやnameを指定しない書き方なので汎用性が高い。

この方法なら複数のformや、複数のsubmitボタンにも楽に対応できる。



あとsubmit絡みのものは2重送信の対策も必要となる。
e.preventDefault() とか$button.attr('disabled', true) とか。








--2014/05/01 記事の一部を変更