[jQuery]$.ajax()を使った時にsubmitボタンのnameが飛ばない
Read More
$.ajax()を使った時にsubmitボタンのnameが飛ばないことを知った。
少し調べてみたところjQueryを使ったときにsubmitボタンのnameが飛ばないのではなく、
そもそもjavascriptでsubmit()をするとnameが飛んでいないということを知った。
へー、そーだったっけー。
今まであんま気にしたことも無かったわあ。
$.ajax()を使ったときにsubmitの値も送りたい場合はこんな感じにすればよい。
■$.ajax()でsubmitのnameとvalueも送る
ちなみにこんなこともできる。
こんな書き方も。
上記の最初2つはsubmitボタンをクリックしたイベントを、
最後のはformのsubmitイベントをキャッチしている。
それぞれキャッチするイベントは違っても一応submitの情報やform要素の情報を取得できている。
ちなみに上記3つはIDやnameを指定しない書き方なので汎用性が高い。
この方法なら複数のformや、複数のsubmitボタンにも楽に対応できる。
あとsubmit絡みのものは2重送信の対策も必要となる。
e.preventDefault() とか$button.attr('disabled', true) とか。
--2014/05/01 記事の一部を変更
少し調べてみたところ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 記事の一部を変更
Category "jQuery" の最新記事
- [jQuery]たった1行でHTML文字列をサニタイズし改行コードはbrタグに置き換えする (0)
- [jQuery]checkboxのチェックが入った行の背景を変える (1)
- [jQuery]checkboxかradioかを調べる (0)
- [jQuery]tableのtdをクリックしてcheckboxにチェックを入れる方法 (4)
- [jQuery]テキストを効果的に表示するTextualizer (0)
- jQuery dataとattrで値が変わる…らん! (4)
- [jQuery]簡単なカウントダウンの実装 (7)
- [jQuery]画面をスクロールしたときにサイドバーの要素を追尾させる方法 (0)
- 複数画像をスクロールさせるjQueryプラグイン「Smooth Div Scroll」 (0)
- jQueryのajax通信がIE8で動かない (0)