buttonの非活性 について

Question

いつもお世話になっております。

表題について、基本的なことになってしまいますが、ご教授お願いいたします。

下記コードがあったとき、

<form action="">
<button type="submit" name="btn">
</form>
コード

$('form').on('submit',function(){
   $(this).find('button:submit').attr('disabled',true);
});

2重起動防止でbuttonを非活性（disabled）にしているのですが、
nameのbtnはpostしたいです。

複数ページがあり共通処理として使いたいので、inputに作り直すとかはせず、buttonは非活性（2回submitしない）にはするが、nameはpostするという方法はありますでしょうか。

初歩的で申し訳ありませんが、ご教授お願いいたします。

Comments

[s8_chu]

「nameのbtn」とはなんでしょうか？

[someiyoshino333]

わかりずらくすみません。
<button type="submit" name="btn">のbtnを
phpであると
$_POST("btn")
とかでとりたいという意味です。

Answer 1

フォームの多重送信を禁止するには、form.onsubmit自体をoff/onするのが早いと思います。

$(function(){
  $("form").on("submit", function onsubmit(event){
    $(this).off("submit").on("submit", false);
  });
});

• 送信ボタン自体に影響を与えない
• inputボックスでエンターキーを押す等で誤送信される可能性を排除できる

また、disabledプロパティを変更されるコードも気になったのでコメントさせて頂きますね。
プロパティをattr()やdata()で変更した場合はJavascript上で現在値を読み取れなくなる可能性があり、prop()を使うようにした方がよいです。

prop - jQuery

Comments

[someiyoshino333]

ありがとうございます！これで解決されました。
proｐの件もアドバイスありがとうございます！今後意識いたします

Answer 2

action=""ということは自分自身にsubmitしているのですよね？
であれば飛び先で非活性化しておきたいなら
location.searchにbtnが存在したらdisabledにすればよいのでは

そうでなく単に2度おしに反応したくないだけなら
１度目にそのボタンに属性をつけて、2回目はその属性をみて
イベントをキャンセルすればよいかと

$(function(){
  $('form').on('submit',function(e){
    var btn=$(this).find('button[type=submit]');
    if(!btn.data('disabled')){
      btn.data('disabled','1');
    }else{
      e.preventDefault();
    }
  });
});

<form action="">
<button type="submit" name="btn">my button</button>
</form>