同じページ内でformのデータを渡したい

Question

<!-- エリア１  -->
<div class="form-area active">
            <h3 class="blue-title">お問い合わせフォーム</h3>
            <form action="" method="post" nema="form">
              <p>お名前<span>（必須）</span></p>
              <input type="text" name="person_name" value="">
              <p>ご連絡先 Email<span>（必須）</span></p>
              <input type="email" name="mail" value="">
              <p>お問い合わせ内容<span>（必須）</span></p>
              <textarea name="inquiry_text"></textarea>
              <div class="submit"><button><img src="images/check.png" alt="送信" type="submit"><span>確認画面</span></button></div><!--  このボタンを押すとエリア2が表示される -->
            </form>
          </div>

          <?php 
            // フォームのボタンが押されたら
            if ($_SERVER["REQUEST_METHOD"] == "POST") {
              // フォームから送信されたデータを各変数に格納
              $person_name = $_POST["person_name"];
              $email = $_POST["email"];
              $inquiry_text  = $_POST["inquiry_text"];
            }
          ?>

<!-- エリア2  -->
          <div class="form-area">
            <h3 class="blue-title">お問い合わせ内容　確認画面</h3>
            <p class="supplement">お問い合わせ内容は以下でよろしいでしょうか。<br>よろしければ「 送信する 」ボタンを押してください。</p>
            <form action="index_submit" method="get">
              <p>お名前</p>
              <p><?php echo $person_name; ?></p>
              <p>ご連絡先 Email</p>
              <p><?php echo $email; ?></p>
              <p>お問い合わせ内容</p>
              <p><?php echo $inquiry_text; ?></p>
            <div class="submit-box">
              <button><img src="images/back.png" alt="送信" /><span>もどる</span></button><!--  このボタンを押すとエリア1が表示される -->
              <button><img src="images/send.png" alt="送信" /><span>送信</span></button><!--  このボタンを押すとエリア3が表示される -->
            </div>
            </form>
          </div>

<!-- エリア3  -->
<div class="form-area">
            <h3 class="blue-title">送信しました。</h3>
            <div class="submit-end"><button><img src="images/back.png" alt="送信" /><span>フォーム入力に戻る</span></button></div><!--  このボタンを押すとエリア1が表示される -->
          </div>

$(function(){
  $('button').on('click',function(){
    switch($(this).text()){
    case "確認画面":
    case "もどる":
      $('.form-area:eq(0),.form-area:eq(1)').toggleClass("active");
      break;
    case "送信":
      $('.form-area:eq(1),.form-area:eq(2)').toggleClass("active");
      break;
    case "フォーム入力に戻る":
      $('.form-area:eq(0),.form-area:eq(2)').toggleClass("active");
      break;
    }
  });
});

現在このようなコードになっています。（jsは表示切り替えのみです。）

この状態で、エリア１で入力した情報をページ遷移をせずに
エリア２に反映させることは可能でしょうか？
加えてその情報を引き継いだままメールを送信することは可能でしょうか？
調べてみましたがajaxを使うのが一般的な気がしますが、ajaxを扱ったことがなく
どう調べていいかも不明なため質問いたしました。
ご教授よろしくお願いいたします。

したい動きをしているサイトを見つけたので貼っておきます。
以下のページの下にあるフォームのような動きを実現したいと考えています。
https://mining.gmo.jp/

Answer 1

まず最初のform内にある、いらない閉じタグ「</div>」が悪さをしているので取って下さい。
またスタイルシートなど記載がないので全部表示されています。

ちょっと質問の意図がわからないのですが
単にsubmitしたいのでしょうか？
それともバックグラウンドでsubmitしたいのでしょうか？

前者ならbottonの処理に親のformをsubmitする記述をする
後者ならajaxで表記する必要があります。
ちなみに飛び先の処理が書いていないのでそれがフォームメールとして
有効かどうかはわかりません

Comments

[MeB]

意図が伝わらず申し訳ございませんでした。
質問を訂正しました。

Answer 2

簡単なのはgetとpostのあわせ技ですかねー。
関係ないフォームはそもそもHTMLにすら含ませません。

1点注意すべきは「<form>～</form>の外にあるsubmitボタン押しても何も送信しないよ」ってことですね。
form内に入れてください。
あとインデントのレベルが合ってないように思うので、調整した方が良いですね。

<?php
if(!array_key_exists("mode",$_GET)){
 $mode = "input";
}else{
 $mode = $_GET["mode"];
}

switch($mode){
  case "input":
    $next_mode = "confirm";
    $next_button = "確認画面";
    $form = <<<EOF
省略
EOF;

    break;
  case "confirm":
    $next_mode = "end";
    $next_button = "送信";
    $form = <<<EOF
省略
EOF;

    break;
  case "end":
    $next_mode = "input";
    $next_button = "フォーム入力に戻る";
    $form = <<<EOF
<p>送信しました</p>
EOF;

}

echo <<< EOF
<form action="hogehoge.php?mode={$next_mode}" method="post" accept-charset="utf-8">
    <div class="form-area active">
        <h3 class="blue-title">お問い合わせフォーム</h3>
            {$form}
        <div class="submit"><button>{$next_button}</button></div>
    </div>
</form>

EOF;

戻るボタンとかsubmitボタンのcssクラスとか色々省略していますが、
その辺りは調整してください。

#　追記

今回の質問にPHPコードが一切ないことと、これまでの質問を拝見したところから察するに、
まだまだPHPで（入力フォームの）データを扱うところの理解が低いように見受けられます。
色々とやりたいのは分かりますが、段階をおってやっていくことが逆に近道となり、
できることの幅が広くなります。
もっと基本のところから学んでいき、動作を含めた装飾については後々あわせていくようにしてはいかがでしょうか。

Comments

[m.ts10806]

意図が伝わっていないようであれば伝わるように修正すれば良いだけです。
新しい質問をたてる必要はありません。
質問編集して対応してください。

[MeB]

しました。

[m.ts10806]

追記しています。
全部一気にやろうとしては自身のスキルとやりたいこととのギャップが大きすぎて追いつかなくなります。
自身が理解できることから、少し上のレベルのことを着実に理解して進めてください。

[MeB]

たしかにそうですね・・・。
まとめてではなく詰まった部分部分でしらべ不明だった点を質問するようにします。

[m.ts10806]

そうですね。がんばってください。
ただ部分部分で進めて詰まったときに質問するのは良いのですが、質問が部分過ぎたりすると完成品がツギハギでおかしくなることがあります。
大目的はきちんと質問に書く必要があるのでそこは注意してください。