広告

フォーム2重送信防止(ダブルクリック防止)

この記事は約3分で読めます。

フォームをダブルクリックされると困る場合のJavaScriptです。

フォームの例(Larabelのブレードなので、注意)

<form id="postform" name="postform" action="{{ url('/postconfirm') }}" method="post">
    <button type="button" id="form__button0" class="form__button">予約をする</button>
    <button type="button" class="form__button form__button_w" onclick="history.back();">前に戻る</button>
    <input type="email" name="mail" value="{{ old('mail') }}" placeholder="sample@example.com" required>
    <textarea name="mess" rows="5">{{ old('mess') }}</textarea>
    <button type="button" id="form__button1" class="form__button">予約をする</button>
    <button type="button" class="form__button form__button_w" onclick="history.back();">前に戻る</button>
</form>

ポイントは、formタグにnameを入れる(JavaScriptで使う)。submitボタンを単なるbuttonとしてJavaScriptで送信する。の2点です。

JavaScriptの例

<script>

// ボタンをID名で取得
const btnSubmit0 = document.getElementById('form__button0'),
      btnSubmit1 = document.getElementById('form__button1');

// カウントを定義
let submitCount = 0;

// クリックしたら、関数を動かす
btnSubmit0.addEventListener('click', doubleClick());
btnSubmit1.addEventListener('click', doubleClick());

// 一度しか送信させない関数
function doubleClick () {
    if (submitCount === 0) {
        // submit()でフォームタグのname="postform"の内容を送信.
        document.postform.submit();

        // カウントアップ
        submitCount++;
    } else {
        return;
    }
}
</script>