質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.37%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 2,815

score 21

現在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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2018/08/05 17:49

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

    キャンセル

  • 退会済みユーザー

    2018/08/05 17:52

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

  • mogiruri

    2018/08/05 18:04

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

    キャンセル

回答 1

checkベストアンサー

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/06 12:51

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

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

    キャンセル

  • 2018/08/06 20:17

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

    キャンセル

  • 2018/08/06 20:46

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る