読者です 読者をやめる 読者になる 読者になる

ITの隊長のブログ

ITの隊長のブログです。いや、まだ隊長と呼べるほどには至っていないけど、日々がんばります。CakePHPとPlayFrameworkを使って仕事しています。最近はAngular2をさわりはじめたお(^ω^ = ^ω^)

<form>でonsubmit="return false;"した時の発火させるevent内では、$('form').removeAttr('onsubmit')だけで良い

JavaScript jQuery

スポンサードリンク

知らんかったというか、これまでずっと下記コードを書いてた。

$('#button').on({
  click: function(e) {
    e.preventDefault(); // 一旦クリックされたイベントをキャンセル
    $(form).removeAttr('onsubmit').submit(); // 消した後に指定のformをsubmitする
  }
});

これでも一応できる。

が、例えば、submitするボタンが複数増えて、さらに押されたボタンを判断して色々処理させたい場合、これでは押されたボタンのnameとvalueが飛んでくれない。

押されたボタンがキャンセルされ、$('form')...submit()で、フォームをただsubmitしているだけなので、値が飛ばない。

なので、こうしましょう。

// 複数押されてもいいようにイベントを監視するボタンはクラス(css)にする
$('.button').on({
  click : function(e) {
    // e.preventDefault(); これをやると押されたsubmitボタンがわからなくなる
    $('#form').removeAttr('onsubmit'); // これをやらないとformを送信できない
    // $(this).submit(); // 最後に押されたところでsubmitする・・・ってわけでもなかった。。。
  }
});

これでおk