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

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

ただいまの
回答率

90.45%

  • PHP

    24602questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    21025questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11904questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Ajax

    1357questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

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

解決済

回答 2

投稿 編集

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

MeB

score 87

<!-- エリア1  -->
<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は表示切り替えのみです。)

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

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

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

+3

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

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

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

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/03/05 09:04

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

    キャンセル

  • この投稿は削除されました

checkベストアンサー

+1

簡単なのは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で(入力フォームの)データを扱うところの理解が低いように見受けられます。
色々とやりたいのは分かりますが、段階をおってやっていくことが逆に近道となり、
できることの幅が広くなります。
もっと基本のところから学んでいき、動作を含めた装飾については後々あわせていくようにしてはいかがでしょうか。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • この投稿は削除されました

  • 2018/03/05 10:45 編集

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

    キャンセル

  • 2018/03/05 10:52

    しました。

    キャンセル

  • 2018/03/05 10:54

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

    キャンセル

  • 2018/03/05 12:28

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

    キャンセル

  • 2018/03/05 13:08

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

    キャンセル

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

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

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

  • PHP

    24602questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    21025questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11904questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Ajax

    1357questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。