【JavaScript】送信ボタンの連続クリック（2度押し）を防止する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでフォーム等の送信ボタンの連続クリック（2度押し）を防止する方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

フォームの送信ボタンの連続クリック（2度押し）の防止するには

フォームの送信ボタンの連続クリック（2度押し）の防止は、フォームのsubmitイベントを取得し、送信ボタンにdisabledを設定することで実現することができます。

処理の流れは下記の通りです。

• 送信ボタンをクリックする
• フォームのsubmitイベントを取得する
• 送信ボタンにdisabledを設定する

送信ボタンにdisabledを設定することで、送信ボタンを無効化（クリックできない状態）することができるため、連続クリック（2度押し）の防止に適しています。

submitイベントを取得して送信ボタンにdisabledを設定する

フォームのsubmitイベントを取得して、送信ボタンにdisabledを設定します。要素の取得方法は様々ですが、ここでは各要素にclassを設定してquerySelectorで要素を取得しています。

HTML

<form class="js-form" action="" method="post">
    <input type="text" name="fullname" value="" required>
    <button class="js-btn">送信</button>
</form>

JavaScript

const form = document.querySelector('.js-form');
const btn = document.querySelector('.js-btn');

form.addEventListener('submit', ()=>{
    btn.disabled = true;
});

実行結果は下記の通りです。

実行結果

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

上記実行結果では、送信ボタンの無効化が開発ツールで確認できるようにアラートを表示する処理を追加しています。

最後に

本記事では、フロントエンドでフォームの送信ボタンの連続クリック（2度押し）を防止する方法をご紹介しました。実際にフォームに処理を組み込む場合、フロントエンドだけでなくバックエンドの対策も必須となりますので、その点ご留意くださいね。

以上、JavaScriptで送信ボタンの連続クリック（2度押し）を防止する方法のご紹介でした！