問題
どうも。みるみっとです。
フロントエンドエンジニアをやっています。
業務中にお問い合わせフォームを作っていたところ、
「できれば二重防止送信機能を作って欲しい」との要望が。
単純に「送信ボタンをクリックした後にdisabledするかぁー」と思っていたのですが、
どうやらsubmitボタンのclickイベントでdisabledにするとonSubmitが実行されないということが分かりました。
※ちなみにonSubmit内でdisabledにしてもダメでした。
別にonSubmitまでdisabledしなくても良いのに...(´ω`)
動作環境
OS: macOs 10.15.6
ブラウザ: Google Chrome ver88.0
解決方法
disabledではなく、CSSの**「pointer-events:none」**を使うと上手くいきました。
pointer-events:noneにすることで、ポインターイベントが無効されます。
つまり、その要素のクリック・タッチが効かなくなります。
ユーザーにとっては実質disabledです。
<form name="myForm" action="" method="get" onSubmit="return submitForm()">
<p class="title">メッセージ</p>
<textarea id="message"></textarea>
<input type="submit" id="submit_pointer" value="送信" onClick="buttonDisabled()">
</form>
//submitボタンのクリックイベント
function buttonDisabled(){
//pointer-eventsをnoneに
$('#submit_pointer').css("pointer-events", "none");
//disabledしてるっぽい色に変更
$('#submit_pointer').css("background", "#636363");
}
//フォームのsubmitイベント
function submitForm(){
return true;
}
実装例
下記に、
①二重送信防止していない送信ボタン
②送信後にdisabledする送信ボタン
③送信後にpointer-events:noneする送信ボタン
の3パターンを実装した礼を載せておきます。
disabledボタンはフォームが送信されず、
pointer-eventsボタンだとフォームが送信されることが分かると思います。
See the Pen submitボタンをdisabledするとsubmitできない件 by mykz (@mykzreas) on CodePen.
※フォームの送信に成功すると(onSubmitが動作すると)アラートが表示されるようにしています。
※ページ遷移を防ぐためonSubmitはreturn falseしています。
終わりに
disabledするとonSubmitが動作しないのはいまいちピンと来ないですが、pointer-events:noneの方が動作的のも軽そうですね。
視覚的にdisabledっぽいボタンの色に変更するのもUX的にも良さそうです。
参考