フォームの間に別のフォームを挿入する

Question

よくある問い合わせフォームがあります

<form id="formform" method="post" action="form.php">
    <input type="text" name="name" /><br />
    <input type="tel" name="email" /><br />
    <input type="fax" name="tel" /><br />
    <input id="submitsubmit" type="submit" value="送信" />
</form>	

これの『送信』ボタンが押された際にjavascript(jQuery)で
別のフォームをポップ（モーダルウィンドウ?iframe?）で出したいと思っています。

そのフォームにも同様に入力して、submitが終わったら元のフォームもsubmitされるというようにしたいです。

本体のhtmlには手を加えず、JSのみでファイルを読み込むだけで実装したいと考えております。

どのような手順で開発したらよいか、
もしくは何か既存のドキュメント等があれば、
お教えいただけると助かります。

Answer 1

JavaScriptでHTML生成できるので、まずはjQueryなどをつかって、

1. form#formformが送信されたときにイベントでポップアップするように関数定義
2. 元HTML側でSubmitされたらform#formform内のデータをすべてinput[type=hidden]としてコピー
3. 改めて新しいformを生成する（コピーしたデータも含める）
4. ポップアップ側で送信すると全データが送信される

という流れですかね。

案外シンプルかと。

Comments

[kenkbou]

ご回答ありがとうございます。
流れにしてみるとすごくシンプルで理解出来ました。ありがとうございます。

本体フォームとポップフォームの送信先はそれぞれ別にしたいと思っています。
同じ流れで実装可能でしょうか？

イメージとしては本体フォームのsubmitが押されたらポップフォームが出て（本体submitは遅延?一時停止?）、ポップのsubmitを押したらポップを送信・閉じる、停止していた本体のフォームも自動でsubmit

みたいな流れです。
なんどもすみません。

[ogaaaan]

`$('#formform').submit();`
で元フォームを送信、
ポップアップ側は
`$('#popform`).submit();`
などすれば送信できるので、
2のコピー処理はせずに、別々にやれば問題ないすよ。

ただ、できれば二つが同じデータという意味も持たせておきたいので、
両者にhiddenで同じ名前のID振っておくのがよいですね。
そうすれば、受け取る側で2つが同じデータだってわかるので。

[kenkbou]

ありがとうございます！
流れが完全に理解できました。

Answer 2

少し面倒ですが

• submitする<form>を1つだけにする
• submitする<form>に、もう一つのフォームの各フィールドを保持する<input type="hidden">を仕込む
• onsubmitなどのイベントで、値をコピーする

なのはいかがでしょうか。

最後のModalでsubmitする例

<form id="formform">
    <input type="text" name="name" /><br />
    <input type="tel" name="email" /><br />
    <input type="fax" name="tel" /><br />
    <input id="submitsubmit" type="submit" value="送信" />
</form>

<div id="dlg">
  <form id="dlgform" method="post" action="form.php">
    <input type="text" name="addition_feield" />

    <input type="hidden" name="name" /><br />
    <input type="hidden" name="email" /><br />
    <input type="hidden" name="tel" /><br />
    
    <input id="submitsubmit" type="submit" value="送信" />
  </form>
</div>

// ページ読み込み時に遅延実行
$(function() {

  // ダイアログには、jQuery-UIを使うのかな？
  // @see https://jqueryui.com/dialog/
  $('#dlg').dialog({/* options... */});

  // 問い合わせフォームのsubmitイベントハンドラ
  $('#formform').submit(function(e) {
    e.preventDefault();    // 遷移の抑止
    $('#dlg').dialog('open');
  });

  // dialogのsubmitイベントハンドラ
  $('#dlgform').submit(function(e) {
    /* コピーを実行するコード */
  });
});

Comments

[kenkbou]

ご回答ありがとうございます。
同時に私の質問が悪かったことお詫びいたします。

今回、本体htmlには手を加えることなく、JSのみで実装したいと考えております。
別ファイルにして本体でJSを読み込むだけで実装ができるというのは難しいのでしょうか・・・？

すみませんが、よろしくお願い致します。

[packpak]

なるほど、納得です（笑）
もう１人の回答者さんの言うように、jQueryで柔軟に出来ます。
ぐぐればいくらでも出てきますよ！

ひとつになることがあって、
モーダルっていうのは、confirm関数でできる程度のことなのかな？
（俗に言うポップアップウィンドウならば、モードレスのはずですが・・・。）

jQuery-UIのダイアログ相当のものを求められてて、それをJavaScriptだけで実装しようとしているのなら・・・。
ちょっと、頑張らなければいけません！（JavaScriptで文字列結合ガリガリ）
参考）https://jqueryui.com/dialog/

でも保守性は最悪なはずで、もしかしたら、ＨＴＭＬの変更を許されるかもしれません。
ワンチャンスありそうなら、どっちがいいか相談してみてはいかがでしょうか？

[kenkbou]

ありがとうございます！
とてもよく分かりました。
保守性の面も気にする必要があるのですね。

作業の流れはわかりましたので、一度実装してみようとおもいます！