【POSTできない問題解消？】disabledでボタン連打させない!

みなさんこんにちは！
カミ@god48_です。

みなさんdisabledでボタン連打させない知識はありますか？
Webサービスやアプリではサービスを向上させるためにはdisabledによるボタン連打をさせないこと処理は必須です。
この記事はdisabledでのボタン連打させない方法や、disabledでPOSTできない方法の対処法などの紹介です。

この記事でわかること

• disabledとは
• disabledでボタン連打をさせない
• pointer-eventsでPOSTさせる方法

この記事を最後まで読めばxxxについての理解が深まりますので、最後まで読んでxxxについてマスターしましょう。

それでは順に見ていきましょう。

disabledとは

disabled

disabled要素とはHTMLコード内の「input」タグや「button」タグで使われます。
inputやbuttonタグででdisabled属性を付与されている場合、input内にテキスト入力ができなくなったり、buttonを押しても反応がしなくなります。

inputでのdisabled

<input id="disabledExample" type="submit" name="disabledName" disabled>

buttonでのdisabled

<button id="disabledExample" type="submit" name="disabledName"disabled>送信</button>

disabledでボタン連打させない方法

disabledの有効サンプル記述予定

スポンサードサーチ

disabledでボタン連打の判定の切り替え

disabledの有効無効サンプル記述予定

disabledでPOSTできない

HTML内でformの値をPOSTしたい。
でもボタン連打対策でdisabled有効時でPOSTしたい。と思う方は多いんじゃないでしょうか？

POST時にdisabledになっているとサーバに送信されずに処理が中断してしまいます。

POSTする方法

$('selector').css('pointer-events: none');

目的はボタンの連打をさせずに、POSTすることなので、ボタンを連打させないためにボタンをクリックさせないようにします。

$('selector').css('pointer-events: none');
サンプル記述予定

スポンサードサーチ

まとめ

• disabledでボタンの連打を無効にする
• disabled中はサーバーへPOSTできなくなる
• pointer-events: noneでボタン連打できなくする

実装やエラーが解決できない場合

プログラミングの実装やエラーでどうしてもわからない場合はメンターに相談するのが一番です。

考えている、見えている範囲が狭くなり、解決から遠くに行って何時間も、何日も経っていることなんてよくある話です。

そういう時は聞ける先輩や、メンターに相談することが大事です。

僕にも相談可能なので気軽に相談してください。

Twitterからの連絡だと確実ですよ。

オンラインスクールやプログラミングスクールといったプログラミングを学べる方法もあるので、そちらもぜひ活用してもいいと思います。

Web開発で分からない時

アプリ開発で分からない時

プログラミングについて分からない時

僕への個人でもメンターでも、スクールでもお好きな方を活用ください。