部分的にモーダルを使うフォームの作成
例えばフロント側の実装で、次のようなものを作ろうとしてる場合を総定する。
- あるページの下端にコメント投稿用のフォームがある。
- フォームは、コメントを入力して「送信」ボタンを押すと、アバター的なアイコン画像を選択させるモーダルが開く。
- アイコン画像はモーダルの入力から、ローカルの画像をアップロードする事もできる。
- モーダルで顔写真を選択して「OK」ボタンを押すとコメントが送信される。
問題1::モーダルからサブミットできない。
最初、Lightbox系のJSプラグインで実装を試みたが、モーダルからOKボタンで送信できず。よくよく調べると、原因は次の通りだった。
Lightbox系プラグインには、モーダルの呼び出し元ページのHTMLソース上における任意の要素（仮に#modalと呼ぶ）を、モーダル内のHTMLソースとして指定できるものがある。
ここで勘違いしてたのが、#modal配下のスタイル設定をJSで変更する仕組みだと思い込んでいた事。
#modal配下にフォームのサブミットボタンとなるinput要素を置けば、フォームの送信ができるものと思っていた。
しかし実際は、試したJSプラグイン達は#modalをフォーム外の場所（bodyタグの開始タグの直後とか）に複製してモーダルとして出す。
結果として、formの外に設けられたサブミットボタンを押す事になる。当然送信できない。
問題2::ファイル型の入力
ならば、OKボタンを押した際に、JSのイベントリスナーを使って対象フォームをサブミットさせれば良いのだが、今回はモーダルの中にも入力項目がある。
それもただの一行テキストとかならいいのだが、ファイル選択型だ。
※なお、ファイル選択型はHTML上では例えば次のように定義される。
<input type="file" name="file_01">
具体的には、例えば、モーダル配下の入力項目が一行テキストだけなら、value属性の値をJSを使って対象フォーム側の一行テキストに渡してやればよい。
しかしファイル選択型は仕様上そうはいかない。value属性以外のものを渡さねばならないようだ。しかもそれが何なのか、調べてみてもイマイチ分からない。
結論
ならば#modalを複製しないでポップアップしてくれるJSプラグインを探せば良いのだが、数あるJSプラグインからいちいち探し出すのは骨が折れる。
仕方なく、自前でモーダルを設けることに。結果、次のデモのような実装を用いて解決した。
/knowledge_short/demo/submit_from_modal.html
次のページが参考になった。
さくっと簡単！jQueryでコンテンツをオーバーレイ表示させる方法 | 株式会社LIG
https://liginc.co.jp/web/js/jquery/39777
関連するタグ
関連するタグは現在ありません。