🪡

登録ボタンのダブルクリックを防ぐ方法

2025/04/06に公開

今、laravelでwebアプリを作成しているのですが、新規登録ボタンを2度押してしまった時に2重で処理が発生してしまい。エラーが発生してしまいます。
これの対策を行なっていきます。

 環境html 一部抜粋
<button class="register-button" id="register-button">新規登録</button>
    </form>
このようなコードになっています。

jsを使用して新規登録ボタンをクリックしたら、ボタンをクリック不可の状態に変更します。
document.addEventListener('DOMContentLoaded', () => {
    const form = document.querySelector('form');
    const button = document.getElementById('register-button');

    form.addEventListener('submit', () => {
        // ボタンを無効化して二重送信防止
        button.disabled = true;
    });
});
上記のjsを適用させたので2重で処理が起きなくなりました。

 終わりにjsはhtmlの内容や、ボタンの無効化などできて便利ですね。webアプリを作る上で必須だと思います。

環境

終わりに

Discussion