フォームをダブルクリックされると困る場合の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>