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

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

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

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

JavaScript

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

Ajax

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

HTML

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

Q&A

解決済

1回答

1114閲覧

ページ遷移なしでformのデータを同じページに送りたい

MeB

総合スコア104

PHP

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

JavaScript

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

Ajax

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

HTML

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

0グッド

0クリップ

投稿2018/03/05 09:46

編集2018/03/06 00:05

やりたいことは
https://mining.gmo.jp/
ここのサイトの下にあるフォームがドンピシャでした。

メールを送るなどの処理はまだ記述しておりません。
ひとまず下記のhtmlの

エリア1で入力したものが
エリア2で表示確認できるようにしたいです。

html

1<!-- エリア1 --> 2<section class="form"> 3 <div id="form" class="form-area active"> 4 <form action="" method="post" nema="form"> 5 <p>お名前<span>(必須)</span></p> 6 <input type="text" name="person_name" value=""> 7 <p>ご連絡先 Email<span>(必須)</span></p> 8 <input type="email" name="mail" value=""> 9 <p>個数<span>(必須)</span></p> 10 <div class="form_select"> 11 <select name="num"> 12 <option value="">わからない</option> 13 <option value="1">1</option> 14 <option value="2">2</option> 15 <option value="3">3</option> 16 </select> 17 </div> 18 <p>お問い合わせ内容<span>(必須)</span></p> 19 <textarea name="inquiry_text"></textarea> 20 <div class="submit"><button type="button" name="mode" value="confirm"><img src="images/check.png" alt="送信"><span>確認画面</span></button></div> 21 </form> 22 </div> 23 24 <?php 25 $person_name=filter_input(INPUT_POST,"person_name"); 26 $email=filter_input(INPUT_POST,"email"); 27 $num=filter_input(INPUT_POST,"num"); 28 $inquiry_text=filter_input(INPUT_POST,"inquiry_text"); 29 ?> 30 31<!-- エリア2 --> 32 <div class="form-area"> 33 <p class="supplement">内容確認<br>OK なら「 送信する 」ボタンをクリック</p> 34 <form action="" method="post"> 35 <p>お名前</p> 36 <p><?php echo $person_name ?></p> 37 <p>ご連絡先 Email</p> 38 <p><?php echo $email ?></p> 39 <p>ご利用中・ご検討の証明書の枚数</p> 40 <p><?php echo $num ?></p> 41 <p>お問い合わせ内容</p> 42 <p><?php echo $inquiry_text ?></p> 43 <div class="submit-box"> 44 <button><img src="images/back.png" alt="送信" /><span>もどる</span></button> 45 <button><img src="images/send.png" alt="送信" /><span>送信</span></button> 46 </div> 47 </form> 48 </div> 49 50<!-- エリア3 --> 51 <div class="form-area"> 52 <h3 class="blue-title">完了</h3> 53 <div class="submit-end"><button><img src="images/back.png" alt="戻る" /><span>フォーム入力に戻る</span></button></div> 54 </div> 55 </section>

js

1//切り替えなしでformの内容を送りたい部分 2$(function(){ 3 $('.submit button').on('click',function(e){ 4 e.preventDefault(); 5 $.ajax({ 6 url: '/index.php', 7 type: 'POST', 8 data: new FormData($('#form').get(0)), 9 dataType: 'text', 10 cache:false, 11 processData: false, 12 contentType: false, 13 }).done(function(data){ 14 console.log(data); 15 }).fail(function(xhr,err){ 16 console.log(err); 17 }); 18 }); 19 20 // htmlの.form-areaの表示切り替え部分 21 $('button').on('click',function(){ 22 switch($(this).text()){ 23 case "確認画面": 24 case "もどる": 25 $('.form-area:eq(0),.form-area:eq(1)').toggleClass("active"); 26 break; 27 case "送信": 28 $('.form-area:eq(1),.form-area:eq(2)').toggleClass("active"); 29 break; 30 case "フォーム入力に戻る": 31 $('.form-area:eq(0),.form-area:eq(2)').toggleClass("active"); 32 break; 33 } 34 }); 35 36});

css

1.form { 2 border-top: solid 3px #b5b5b5; 3 margin-top: 63px; 4} 5.form .form-area { 6 background: #fff; 7 /* border: solid 1px #767676; */ 8 border-top: solid 3px #b5b5b5; 9 margin-top: 60px; 10 display:none 11} 12.form .active{ 13 display: block; 14} 15 16.form .form-area .blue-title { 17 margin-top: 40px; 18} 19.form .form-area h3 { 20 padding: 0 0 18px; 21} 22.form p { 23 margin-top: 19px; 24} 25.form-area .supplement { 26 font-size: 18px; 27 text-align: center; 28 line-height: 30px; 29 margin-top: 0; 30 margin-bottom: 50px; 31} 32.form-area .supplement span{ 33 font-size: 14px; 34} 35.form form { 36 padding: 0 65px; 37} 38.form form p { 39 font-size: 24px; 40 color: #005eae; 41 font-weight: bold; 42 margin-top: 25px; 43} 44.form button span { 45 display: none; 46} 47.form form p span { 48 font-size: 16px; 49 color: #ff0000; 50} 51.form .submit-box { 52 justify-content: center; 53 text-align: center; 54} 55.form .submit-box img { 56 width: 60%; 57 height: 60%; 58 margin-top: 40px; 59} 60.form .submit-end { 61 text-align: center; 62} 63.form .submit-end img { 64 width: 60%; 65 height: 60%; 66} 67.form input[type="text"], 68.form input[type="tel"], 69.form input[type="email"], 70.form select, 71.form textarea { 72 outline: none; 73 border: none; 74 font-size: 16px; 75 width: 100%; 76 height: 38px; 77 margin: 8px 0 0; 78 border: solid 1px #767676; 79} 80.form .form_select select { 81 background-color: #fff; 82 outline: none; 83 -webkit-appearance: none; 84 -moz-appearance: none; 85 appearance: none; 86 border: none; 87 border-radius: 0; 88 padding-left: 47%; 89 font-size: 16px; 90 border: solid 1px #7d7d7d; 91} 92.form .form_select { 93 position: relative; 94} 95.form .form_select:before { 96 z-index: 1; 97 position: absolute; 98 left: 12px; 99 top: 18px; 100 content: ""; 101 width: 0; 102 height: 0; 103 border-style: solid; 104 border-width: 17px 10px 0 10px; 105 border-color: #5e5e5e transparent transparent transparent; 106 line-height: 43px; 107 color: #737373; 108 pointer-events: none; 109} 110.form textarea { 111 height: 200px; 112} 113.form .submit { 114 text-align: center; 115 margin-top: 70px; 116 padding-bottom: 48px; 117} 118.form-area form p:nth-child(even) { 119 color: #000; 120 font-size: 18px; 121 font-weight: 300; 122 padding-bottom: 5px; 123 line-height: 30px; 124 border-bottom: solid 1px #333; 125} 126.form-area .submit-box { 127 display: flex; 128} 129.form button { 130 padding: 0; 131 border: none; 132 background: transparent; 133}

フォームの知識ほぼ0から様々の方の意見を元に作っていますが、
ここからどこのなおせばいいのかわからず詰まっております。

質問
jsの「切り替えなしでformの内容を送りたい部分」の記述はあっておりますでしょうか?
またあっているの仮定して
html(正確にはindex.phpですが)内に
$person_name=filter_input(INPUT_POST,"person_name");
echo $person_name;
でよろしいのでしょうか?

現在.form-areaの表示切り替えはできていますが、
エリア2に切り替えた際に値が飛んできていない状態です。
エリア1の確認画面というボタンを押すとjsの
console.log(data);
部分がブラウザのコンソールに表示されます。(html全文)

idやclass、js処理などは追加しても問題ありません。
動作にマイナスの影響のあるidなどは削除でも問題ありません。

ご教示お願いします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MeB

2018/03/05 10:14

他に補足すべき点は何でしょうか…
date

2018/03/05 10:24

他の質問にもありましたが、CSSを入れて下さい
MeB

2018/03/05 10:35

追記しました。
date

2018/03/05 10:39

またこれにid などを追加で入れてもいいのか 変えちゃだめというときもあるので
MeB

2018/03/05 10:41

あ、なるほど…。すみません。追記しておきます。
yambejp

2018/03/05 10:51

とりあえず$(function(){・・・});がかぶっているので1つにまとめてください
MeB

2018/03/06 00:03

失礼しました…。まとめました。
guest

回答1

0

ベストアンサー

様々な方法があると思いますが
Ajaxを使うのは最後の送信部分だけにしてあとはボタン事にJavascriptで処理表示していくのがいいと思います。

今の処理内容だと画面繊維しないと

<?php $person_name=filter_input(INPUT_POST,"person_name"); $email=filter_input(INPUT_POST,"email"); $num=filter_input(INPUT_POST,"num"); $inquiry_text=filter_input(INPUT_POST,"inquiry_text"); ?>

この部分が処理されないので表示されないです。

投稿2018/03/06 02:07

date

総合スコア1820

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問