3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【JavaScript】submitボタンをonClick()でdisabledするとonSubmit()が実行されない件【二重送信防止】

Last updated at Posted at 2021-03-02

問題

どうも。みるみっとです。
フロントエンドエンジニアをやっています。

業務中にお問い合わせフォームを作っていたところ、
「できれば二重防止送信機能を作って欲しい」との要望が。

単純に「送信ボタンをクリックした後に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.html
<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>
form.js
//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的にも良さそうです。

参考

3
1
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?