部分的にモーダルを使うフォームの作成

投稿日: 更新日:

例えばフロント側の実装で、次のようなものを作ろうとしてる場合を総定する。

  • あるページの下端にコメント投稿用のフォームがある。
  • フォームは、コメントを入力して「送信」ボタンを押すと、アバター的なアイコン画像を選択させるモーダルが開く。
  • アイコン画像はモーダルの入力から、ローカルの画像をアップロードする事もできる。
  • モーダルで顔写真を選択して「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

関連するタグ

関連するタグは現在ありません。