制作技術の話フォームの「送信」ボタンを連続で押すとメールが多重送信されちゃうから、それを阻止したいとなった。独自でフォームを作っているなら、phpでトークンを使って検証して動作を制御なんてこともできるんですが、WordPressでプラグインとかを使っている場合、phpをいじるのはちょっと現実的ではない。いうわけで、今回はjQueryで3分でできちゃう方法をご紹介します。実装HTMLフォームのHTML。サブミットボタンにIDをつけましょう。value="送信する">余談ですが、cssでスタイリングするときはclass、javascriptで動かす場合はidにしておくとわかりやすくていいですよ。classじゃなくてidで動かしたほうが圧倒的に処理が速いみたいです。僕はスタイリングの際はほとんどidを使用しません。jQueryたった3行。{$(this).css('pointer-events','none');});“#double”をクリックしたら、それに{pointer-events:none;}をつけてるだけですね。none;はマウスホバーやクリック等のイベントの一切を禁止する神のようなプロパティで、便利すぎるのでちょいちょい使ってます。ボタンを1回クリックしたら、cssでそれ以降のイベントを禁止する。例のごとく、IE10以下では使えません。いいんじゃない?安全性も動作も完璧に仕上げたいのであれば、phpでがんばるしかないかなと思いますが、実装費用に比べて効果はどんなものかといったところで相談しましょう。disabledじゃだめなの?フォームのパーツの操作を全面的に禁止する”disabled”というものがありますよね。実は僕も最初これを使ってやってみたんですが、サブミットボタンがdisabledになった瞬間、フォームの送信も中断されてしまうんですね。送信ボタンを押しても何も起きない。2度とボタンは押せないのである。巷ではこれを回避するために、ボタンが押されたらdisabledとなると同時に、ajaxで別途フォームの内容を送信するという方法が紹介されていましたが、これまたWordPressプラグインでやるのはきついです。cssでイベントを禁止するだけなら、フォーム送信を妨げることもありません。以上、現場からでした。jQuery最高の教科書Amazonで見るみやぜろなんとなく京都に住み着いたほんわか系在宅フリーランス。Webディレクター兼コーダー/ブロガーTwitter→@zeroichi69Twitterではブログの更新通知をしたりたまに役に立つことを言ったり、しょうもないことをつぶやいたりしてます。フォローしてくださいね!twitterフォローしてね!みやぜろ関連記事WordPressでブログを始める方法をプロのWeb屋が徹底解説こんにちは、プロのWeb屋こと、みやぜろです。これですが、そのままだとPCでもクリックできちゃう。カスタム投稿ごとにfeedの内容を出し分けるクラ「WordPressのfeedをカスタマイズしてほしいです。カスタム投稿ごとに内容を変えて。「このタームの記事だけ項目を非表示にできますか?」と言われたとき、すぐにはわからなくてちょっと調べたので、以後すぐ思い出せるようにメモ。みやぜろなんとなく京都に住み着いたほんわか系在宅フリーランス。Webディレクター兼コーダー/ブロガーTwitter→@zeroichi69Twitterではブログの更新通知をしたりたまに役に立つことを言ったり、しょうもないことをつぶやいたりしてます。