ボタンが多重クリックされるのを防止したい。

Question

前提・実現したいこと

ボタンが多重クリックされるのを防止したい。
現在submitボタンでDBデータの多重登録が発生している稼働中の画面の修正です。
cakePHPで作成されており、ViewでPOST submit後にController側で入力項目のエラーチェックが行われます。
View(テンプレート）のjavaScript で対応しようと考えていますが、うまくいきません。
html部分とjavascriptは同一ファイルに記載しています。

よろしくご教示ください。

発生している問題・エラーメッセージ

ボタンが disable=true にならない。
submit がエラーとなりDB登録ができない。

稼働中（修正前）のソースコード

<!-- onclickに該当するjavascriptはナシ -->
<form name="form1"  action="xxxxxx" method="post">
<input type="hidden" name="firstname" value="{$firstname}"><br />			<input type="submit" value="ボタン" />
</form>

試したこと

必要最小限の記載しかできないのですが、

<!-- パターン1 -->

<script type="text/javascript">
  function disabled_function(btn){
    btn.disabled = true;
    btn.form.submit();	
  }
</script>
<form name="form1"  action="xxxxxx" method="post">
<input type="hidden" name="firstname" value="{$firstname}"><br />
<input type="submit" value="ボタン" onclick="disabled_function(this);" />
</form>

<!-- パターン2 -->

<script type="text/javascript">
  function disabled_function(btn){
    btn.disabled = true;
    var f = btn.forms["form1"];
    f.method = "POST";
    f.action = "/xxxxxx/";
    f.submit();
    return true;
  }
</script>
<form name="form1"  action="/xxxxxx/" method="post">
<input type="hidden" name="firstname" value="{$firstname}"><br />
<input type="button" name="capture" value="ボタン" onclick="disabled_function(this);" />
</form>

補足情報（FW/ツールのバージョンなど）

cakePHP 2.x
自PCにてVagrant+VirtualBoxでCentOS6環境で実施

Comments

[kyoya0819]

それは意図せず多重クリックが起こっているということでしょうか？
それとも攻撃や不意の挙動による多重クリックを防止したいのでしょうか？

[Rebecca]

現状何度でもクリックできる状態です。クリックの数DB insertが行われます。

[tanishi_a]

押したとき(サーバの応答を待ってる間)にボタンが無効の状態にならないということですよね？
書いてある例だと、ボタンは無効になったので、問題が再現できないように思います。
再現できる方法を特定しないと、回答得られないと思います。
あと、どのブラウザでも現象は同様でしょうか？

[Rebecca]

ありがとうございます。
Chrome 推奨システムなので他では試してません。disabled_function　で他のことはしておらず。。。
原因は特定できるでしょうか。

[tanishi_a]

たとえば、関数内でsubmitを呼ぶのをやめて、ボタンが無効になることを確認するとか、その際、type="submit" をいったん type="click" にするとか。

[Rebecca]

ありがとうございます。
試してみます。

勝手ながら諸事情により動作確認後返信は2週間程後になります

Answer 1

javascript でも disabled=true とすると、submit() 関数も使えなくなったように思います。
disabled=true はsubmit()関数の後に置いてみるのはどうでしょう。

パターン１の場合

  function disabled_function(btn){
    btn.form.submit();    
    btn.disabled = true;
  }

パターン２の場合

  function disabled_function(btn){
    var f = btn.forms["form1"];
    f.method = "POST";
    f.action = "/xxxxxx/";
    f.submit();
    btn.disabled = true;
    return true;
  }

Answer 2

loadshのonceを使ってみては？

Comments

[Rebecca]

ありがとうございます。
"loadsのonce"がわかりません。。。。使い方などおしえていただけませんか。

[Nippun]

_.once(使いたい関数）でできます。

Answer 3

みなさま、アドバイスありがとうございます。

javascript/htmlでsubmit後にdisabled=trueにすると、Controller側のチェック処理がうまく動作しなくなり困っていました。
以下記事のjQuery?を参考にして記載したところ動作したように思います。
https://teratail.com/questions/117243

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

<input type="submit" value="ボタン" />

お世話になりましたm(_ _)m