index.htmlでの問い合わせ情報を外部xxx.php（モーダル表示）で受信

Question

現在webページ作成をしています。　”index.html”　にてメールフォームを作成し　”メールアドレス”、”件名”、”内容”　を外部　”xxx.php”　で受信し、それをモーダルで確認画面として画面を変えることなく表示し、送信すると完了表示がでる、という流れで作成を試みています。

やりたいこととしては
”画面を変えずに全ての工程を完結（そのためモーダルでの確認表示）”
”確認ボタン　ー＞　確認モーダル出現、送信プッシュ　ー＞　完了表示”、ということです。

html内メールフォームで確認ボタンを押すと、特定箇所に　”確認モーダル.php”　のコードを外部ファイルとして組み込みフォーム内容が反映されたモーダルを表示、という流れを行おうと思ったのですが元ファイルが.htmlでの作成のため　”確認モーダル.php”　が機能しないのではないかと気づきました。
（index.html, modal.php, send.php　で構成しようとしてました）

”確認モーダル”のほうは言語種類を変えてしまってもindexにもとからhtmlとして組んでしまうのでもいいので、上記のやりたいことを踏まえたスマートなやりかたを提案していただけないでしょうか。

＊mailto でメーラーを呼ぶ方法以外の、formに入ったデータを送信する方法でお願いいたします。
＊perlは使用しない方向でお願いいたします。

よろしくお願いいたします。

<form action="modal.php" method="post">
              <ul class="form">
                <li class="email"><input type="text" name="email" placeholder="Email"></li>
                <li class="subject"><input type="text" name="subject" placeholder="Subject"></li>
                <li class="message"><textarea name="message" placeholder="Message"></textarea></li>
                <li class="confirm-btn">Confirm</li>
              </ul>
            </form>

<div id="conf-modal">
  <div class="blackOut">
  </div>
  <div class="confirm">
    <h1>Confirmation</h1>
    <p>Email : <?php echo $_POST["email"]; ?></p>
    <p>Subject : <?php echo $_POST["subject"]; ?></p>
    <p>Message : </p>
    <p><?php echo $_POST["message"]; ?></p>
    <p class="btn" >Back</p>
    <input class="btn" type="submit" value="Send">
  </div>
</div>

Comments

[m.ts10806]

この質問内容だけでは質問者さんがどこまでできているかわかりません。質問の締め方を見ると「コードください」のようにも見えます。まずは自身が作っているコードを途中のものでも結構ですので提示してください。

[mogiruri]

mts10806 様　大変申し訳ございませんでした、コード部分を記載しておりませんでした、以後気をつけます。上記でやりたいことは、.confirm-btn　を押したらphp部分の記述をモーダルとして表示させたいということです。ですが、このphpファイルを組み込んでしまうと親ファイルがhtmlなので、どういう方法でフォーム内容を反映させたモーダルを表示すたものか、というところでつまづいております。

Answer 1

「入力内容を取得して画面中の任意の場所に表示」だけであれば
PHPを使わなくてもJavaScriptを使えば良いのではないでしょうか。

Comments

[mogiruri]

mts10806　様
ご回答ありがとうございます。仮に確認画面までをJSで書いたとして、送信の部分はどうしたよいでしょうか？いろいろ勉強したてのもので、どういったやりかたがあるのかも勉強中なのですが、send.phpに送信工程を記述する以外にシンプルな方法はございますか？

[m.ts10806]

入力画面でSUBMITしたときにモーダルをあげてしまえば良いです。
実際画面は入力画面と完了画面の2つになります。
入力画面→確認画面（入力画面内）→完了画面です。

[mogiruri]

とりあえずモーダル表示まではjqueryで入力内容を引っ張ってくるところまでできました
（ブランクへの警告はまだ実装していませんが。。。）

// modal func
$('.confirm-btn').click(function(){
var email = document.getElementById("getEmail");
var subject = document.getElementById("getSubject");
var message = document.getElementById("getMessage");
email.innerText = document.form1.email.value;
subject.innerText = document.form1.subject.value;
message.innerText = document.form1.message.value;
$('#modal-wrapper').fadeIn();
});

//form html
<form action="" method="post" name="form1">
<ul class="form">
<li class="email"><input type="text" name="email" placeholder="Email"></li>
<li class="subject"><input type="text" name="subject" placeholder="Subject"></li>
<li class="message"><textarea name="message" placeholder="Message"></textarea></li>
<li><button class="confirm-btn" type="button">Confirm</button></li>
</ul>
</form>

//modal html
<div id="modal-wrapper">
<div class="blackOut">
</div>
<div class="confirm">
<h1>Confirmation</h1>
<p>Email : <span id="getEmail"></span></p>
<p>Subject : <span id="getSubject"></span></p>
<p>Message : <br><span id="getMessage"></span></p>
<button class="back-btn btn">Back</button>
<input class="send-btn btn" type="submit" value="Send">
</div>
</div>

form のactionはどこに投げるのが得策でしょうか？

[m.ts10806]

modalのHTMLがどこにあるか分かりませんけど、あくまで入力チェックOKの内容のみを表示しているのだとしたらformはこのままでモーダルのSendボタンを押したときに今の入力フォームをそのまま送信すれば良いですね。
actionの向き先は1つ前のコメントで書いたとおり、完了画面です。

> 入力画面でSUBMITしたときにモーダルをあげてしまえば良いです。
実際画面は入力画面と完了画面の2つになります。
入力画面→確認画面（入力画面内）→完了画面です。

[mogiruri]

無事送信のところまでこれました、メール関連のテストでも積んでしまいそうですが調べながらやて見たいと思います。
大変ありがとうございました。

[m.ts10806]

解決につながりそうで何よりです。
メール送信については動作させているサーバーがどのサーバーか（ローカルか、何かのレンタルサーバーなどのサービスか）で違ってきます。前者であれば設定が必要です。
その辺りは一度やってみて整理してから不明点があれば質問あげてみてください。
似たような質問もあったはずなので過去質問から類似の質問を検索して参考にするのもありです。