ボタンを非活性化して二重送信を防止したい
Q&A
Closed
解決したいこと
特定のボタンを非活性化して二重送信を防止したいです。
発生している問題
ボタンを非活性化することはできましたが、button、submitにしている箇所が全て非活性化されてしまう状況です。
特定のボタンが非活性化されるようにjsを修正したいですが、クラス？id？の指定方法が分かりません。
該当するソースコード
掲載したコードは登録ボタンだけですが、画面には戻るボタンや他のボタンがあります。
現状コードだと登録ボタンを押した際に、戻るボタンや他のボタンも非活性化されてしまうので、登録ボタンを押したときには登録ボタンだけが非活性化されるようにしたいです。
index.php
<?= $this->Form->button(__('登録'), ['class' => 'float-right margin-left5px']) ?>
double_click_disabled.js
$(function() {
$(document).on('submit', function() {
$('form').find(':submit').prop('disabled', true);
$('form').find(':button').prop('disabled', true);
});
});
自分で試したこと
index.phpでidを作り、jsの方でidを渡してみましたが変化はありませんでした。
index.php
<?= $this->Form->button(__('登録'), ['class' => 'float-right margin-left5px','id'=>'click_disabled']) ?>
double_click_disabled.js
$(function() {
document.getElementById('click_disabled').onsubmit = function() {
$('form').find(':submit').prop('disabled', true);
$('form').find(':button').prop('disabled', true);
}
});
新たに発生した問題
回答いただいたもので試したところ、やりたいこととしてはできました。
追加情報で、写真のように登録ボタンが複数ある画面では最初の登録ボタンしか非活性化されませんでした。
写真は、氏名が一覧表示される画面で、氏名ごとに登録できるようになっています。写真の登録ボタンを押すと、項目A(Aは仮称)に内容が入る仕様です。
現在、一番初めの登録ボタンは非活性化されますが、二個目以降のボタンは非活性化されていない状況です。
該当するソースコード
index.php
<?= $this->Form->postButton(__('登録'), ['action' => 'addBusinessTalk', $company->id],['class'=>'button margin_bottom_none','id'=>'click_disabled']) ?>
double_click_disabled.js
$(function() {
$(document).on('submit', function() {
$('#click_disabled').prop('disabled',true);
});
});
アドバイス・ヒントをお願いいたします。
0
