jQuery UI Dialogでモーダルダイアログボックスを出して入力内容をフォームでPOSTしようとしたが全然POSTされない、強制的にsubmit()してもサーバ側にPOSTデータはまったく送信されず…なぜ!?

フォーム入力させてPOSTで送信……というのは普通に実装する内容だが、これをダイアログボックスで実装するとカッコイイ。ということで、手ごろなところでjQuery UI Dialogを使うことにしている。以前にも使った経験があり実績があるので(後述)、これで実装しようとしたら、いや1日ハマってしまったのである。 “jQuery UI Dialogでモーダルダイアログボックスを出して入力内容をフォームでPOSTしようとしたが全然POSTされない、強制的にsubmit()してもサーバ側にPOSTデータはまったく送信されず…なぜ!?” の続きを読む

郵便番号を入力して検索ボタンをクリックしたら、入力フォームやプルダウンに検索結果の住所を挿入するようにしたい

郵便番号を入力したら住所が出てくるというフォームは最近よく見かけるので、むしろそうなっていないフォームにぶちあたると「めんどくせー」と思ってしまうことすらないだろうか。まあそれはともかく、そうしたサイトで実現しているであろうテクニックを書いてみたい。 “郵便番号を入力して検索ボタンをクリックしたら、入力フォームやプルダウンに検索結果の住所を挿入するようにしたい” の続きを読む

FAQ(Q&A)などでよくある、見出しをクリックしたらアコーディオン式に内容の表示/非表示を切り替えられるやり方をjQueryで実装したい

Q&Aなどのような、一覧でズラーと並べてしまうと見にくくなってしまうような場合、不必要な表示は隠しておきたい。そしてユーザがクリックするなどのアクションに従って表示させたい。そうした表示方法はいくつかあるだろうが、アコーディオン式の表示/非表示切り替えは比較的使いやすいのではないだろうか。 “FAQ(Q&A)などでよくある、見出しをクリックしたらアコーディオン式に内容の表示/非表示を切り替えられるやり方をjQueryで実装したい” の続きを読む

未入力状態のテキストフォームにグレーのデフォルト文字を表示し、フォーカスがあたったり文字が入力されたら消えるようにしたい

最近はお問い合わせや予約のフォームで一般的になりつつある、テキストフォームに入力説明や入力例といったデフォルト文字をグレーで淡く表示しておき、入力フォームをクリックしてフォーカスが当たったり、何か文字が入力されたりしたらデフォルト文字を消す。逆に入力文字がすべて空になった場合はふたたびデフォルト文字を淡く表示するといった方式。これをjQueryで実現してみた。 “未入力状態のテキストフォームにグレーのデフォルト文字を表示し、フォーカスがあたったり文字が入力されたら消えるようにしたい” の続きを読む

jQueryを使って入力フォームのコピー&ペースト(コピペ)を禁止するようにしたいと思って作業してもぜんぜん思い通りにならなかったが、意外な盲点がそこにあったためだった

パスワード確認入力や電子メールアドレス確認入力などのフォームで、コピー&ペーストを禁止したい場面がある。せっかくの確認のための入力なのに、手入力されずにコピペされてしまうと、もともとの入力が誤っている場合には何の効力も持たなくなってしまう。だから元の入力フォームはコピーさせてもいいけれど(あるいはこちらも禁止したいという要望もあるかもしれない)、確認のための入力欄についてはペースト禁止したい。ウェブでフォームを作っていると、そんな要望は必ずといっていいほど出てくる。jQueryではそれが簡単にできる。 “jQueryを使って入力フォームのコピー&ペースト(コピペ)を禁止するようにしたいと思って作業してもぜんぜん思い通りにならなかったが、意外な盲点がそこにあったためだった” の続きを読む

selectタグで画像を選択するためのeggというのを使ってみる

数ある画像をユーザに選択させるのに、セレクトボックスを利用することはできないだろうか……と思って調べてみたら、やはり存在した。「Egg」というjQueryベースのプラグ印だ。もともとは「ImageSelect」というやはりjQueryベースの画像セレクタだったらしいが、最新版は別のプラグインとして登場しているようだ。これがシンプルに使えそうなので使ってみた。 “selectタグで画像を選択するためのeggというのを使ってみる” の続きを読む

jQuery UI標準のカレンダーUI「datepicker」を使う

datepickerは、jQuery UIのUIセットに含まれる標準のカレンダー機能で、おそらくカレンダーUIとしてはもっとも使われているものの1つなのだと思う。なので世の中に多数の利用方法を解説したブログがあるだろうが、まあ自分メモ用として記録しておくことにした。 “jQuery UI標準のカレンダーUI「datepicker」を使う” の続きを読む

jQueryでチェックボックスの全チェック/外しをしようとしてハマッたこと、attr()とprop()の違いは罠レベル

チェックボックスの全チェックボタン、全チェック外しボタンを実装して、一括チェック・一括チェック外しといった動的フォームを作成しようと思い、jQuery-1.9.1を使って実装していた。もともとjQueryは1.4系をメインに使っていたのだが、今回jQuery1.9系を使うようにしてみた。もっともここが落とし穴にハマる第一段階だったのだが……。 “jQueryでチェックボックスの全チェック/外しをしようとしてハマッたこと、attr()とprop()の違いは罠レベル” の続きを読む