teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問同じページ内でformのデータを渡したい

編集履歴

質問編集履歴

6

訂正

2018/03/05 01:51

投稿

MeB
MeB

スコア104

test CHANGED
File without changes
test CHANGED
File without changes

5

訂正

2018/03/05 01:51

投稿

MeB
MeB

スコア104

test CHANGED
File without changes
test CHANGED
@@ -1,17 +1,3 @@
1
- [https://teratail.com/questions/115805](https://teratail.com/questions/115805)
2
-
3
- こちらの質問の続きになってしまうのですが、
4
-
5
- どのように同じページに値を送受信できますでしょうか？
6
-
7
- 現在phpの記述はないので、このようなかんじにする程度で構いません。
8
-
9
- ページ切り替え意外やったことがなく苦戦しています。調べてもなかなかたどり着けず…
10
-
11
- ご教示お願いします。
12
-
13
-
14
-
15
1
  ```html
16
2
 
17
3
  <!-- エリア１ -->
@@ -20,35 +6,49 @@
20
6
 
21
7
  <h3 class="blue-title">お問い合わせフォーム</h3>
22
8
 
23
- <form action="index_submit" method="get" accept-charset="utf-8">
9
+ <form action="" method="post" nema="form">
24
10
 
25
11
  <p>お名前<span>（必須）</span></p>
26
12
 
27
- <input type="text" name="Person_name">
13
+ <input type="text" name="person_name" value="">
28
-
29
- <p>ご連絡先 TEL<span>（必須）</span></p>
30
-
31
- <input type="tel" name="tel">
32
14
 
33
15
  <p>ご連絡先 Email<span>（必須）</span></p>
34
16
 
35
- <input type="email" name="mail">
17
+ <input type="email" name="mail" value="">
36
-
37
- </div>
38
18
 
39
19
  <p>お問い合わせ内容<span>（必須）</span></p>
40
20
 
41
21
  <textarea name="inquiry_text"></textarea>
42
22
 
23
+ <div class="submit"><button><img src="images/check.png" alt="送信" type="submit"><span>確認画面</span></button></div><!-- このボタンを押すとエリア2が表示される -->
24
+
43
25
  </form>
44
-
45
- <div class="submit"><button>確認画面</button></div><!-- このボタンを押すとエリア2が表示される -->
46
26
 
47
27
  </div>
48
28
 
49
29
 
50
30
 
31
+ <?php
32
+
33
+ // フォームのボタンが押されたら
34
+
35
+ if ($_SERVER["REQUEST_METHOD"] == "POST") {
36
+
37
+ // フォームから送信されたデータを各変数に格納
38
+
39
+ $person_name = $_POST["person_name"];
40
+
41
+ $email = $_POST["email"];
42
+
43
+ $inquiry_text = $_POST["inquiry_text"];
44
+
45
+ }
46
+
47
+ ?>
48
+
49
+
50
+
51
- <!-- エリア２ -->
51
+ <!-- エリア2 -->
52
52
 
53
53
  <div class="form-area">
54
54
 
@@ -56,49 +56,47 @@
56
56
 
57
57
  <p class="supplement">お問い合わせ内容は以下でよろしいでしょうか。<br>よろしければ「 送信する 」ボタンを押してください。</p>
58
58
 
59
- <form action="index_submit" method="get" accept-charset="utf-8">
59
+ <form action="index_submit" method="get">
60
60
 
61
61
  <p>お名前</p>
62
62
 
63
- <p><!-- ここに入力データを受け取る --></p>
63
+ <p><?php echo $person_name; ?></p>
64
-
65
- <p>ご連絡先 TEL</p>
66
-
67
- <p><!-- ここに入力データを受け取る --></p>
68
64
 
69
65
  <p>ご連絡先 Email</p>
70
66
 
71
- <p><!-- ここに入力データを受け取る --></p>
67
+ <p><?php echo $email; ?></p>
72
68
 
73
69
  <p>お問い合わせ内容</p>
74
70
 
75
- <p><!-- ここに入力データを受け取る --></p>
71
+ <p><?php echo $inquiry_text; ?></p>
76
-
77
- </form>
78
72
 
79
73
  <div class="submit-box">
80
74
 
81
- <button>もどる</button><!-- このボタンを押すとエリア１が表示される -->
75
+ <button><img src="images/back.png" alt="送信" /><span>もどる</span></button><!-- このボタンを押すとエリア1が表示される -->
82
76
 
83
- <button>送信</button><!-- このボタンを押すとエリア３が表示される -->
77
+ <button><img src="images/send.png" alt="送信" /><span>送信</span></button><!-- このボタンを押すとエリア3が表示される -->
84
78
 
85
79
  </div>
80
+
81
+ </form>
86
82
 
87
83
  </div>
88
84
 
89
85
 
90
86
 
91
- <!-- エリア３ -->
87
+ <!-- エリア3 -->
92
88
 
93
- <div class="form-area">
89
+ <div class="form-area">
94
90
 
95
- <h3>送信しました。</h3>
91
+ <h3 class="blue-title">送信しました。</h3>
96
92
 
97
- <div class="submit-end"><button>フォーム入力に戻る</button></div><!-- このボタンを押すとエリア１が表示される -->
93
+ <div class="submit-end"><button><img src="images/back.png" alt="送信" /><span>フォーム入力に戻る</span></button></div><!-- このボタンを押すとエリア1が表示される -->
98
94
 
99
95
  </div>
100
96
 
101
97
  ```
98
+
99
+
102
100
 
103
101
  ```js
104
102
 
@@ -136,10 +134,26 @@
136
134
 
137
135
  ```
138
136
 
137
+ 現在このようなコードになっています。（jsは表示切り替えのみです。）
138
+
139
+
140
+
141
+ この状態で、エリア１で入力した情報をページ遷移をせずに
142
+
143
+ エリア２に反映させることは可能でしょうか？
144
+
145
+ 加えてその情報を引き継いだままメールを送信することは可能でしょうか？
146
+
147
+ 調べてみましたがajaxを使うのが一般的な気がしますが、ajaxを扱ったことがなく
148
+
149
+ どう調べていいかも不明なため質問いたしました。
150
+
151
+ ご教授よろしくお願いいたします。
152
+
139
153
 
140
154
 
141
155
  したい動きをしているサイトを見つけたので貼っておきます。
142
156
 
143
- 以下のページの下にあるフォームのような動きをしたいです。
157
+ 以下のページの下にあるフォームのような動きを実現したいと考えています。
144
158
 
145
159
  [https://mining.gmo.jp/](https://mining.gmo.jp/)

4

訂正

2018/03/05 01:51

投稿

MeB
MeB

スコア104

test CHANGED
File without changes
test CHANGED
@@ -142,4 +142,4 @@
142
142
 
143
143
  以下のページの下にあるフォームのような動きをしたいです。
144
144
 
145
- https://mining.gmo.jp/
145
+ [https://mining.gmo.jp/](https://mining.gmo.jp/)

3

訂正

2018/03/05 00:13

投稿

MeB
MeB

スコア104

test CHANGED
File without changes
test CHANGED
@@ -135,3 +135,11 @@
135
135
  });
136
136
 
137
137
  ```
138
+
139
+
140
+
141
+ したい動きをしているサイトを見つけたので貼っておきます。
142
+
143
+ 以下のページの下にあるフォームのような動きをしたいです。
144
+
145
+ https://mining.gmo.jp/

2

ていせい

2018/03/05 00:03

投稿

MeB
MeB

スコア104

test CHANGED
File without changes
test CHANGED
@@ -3,6 +3,12 @@
3
3
  こちらの質問の続きになってしまうのですが、
4
4
 
5
5
  どのように同じページに値を送受信できますでしょうか？
6
+
7
+ 現在phpの記述はないので、このようなかんじにする程度で構いません。
8
+
9
+ ページ切り替え意外やったことがなく苦戦しています。調べてもなかなかたどり着けず…
10
+
11
+ ご教示お願いします。
6
12
 
7
13
 
8
14
 

1

訂正

2018/03/02 10:45

投稿

MeB
MeB

スコア104

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,14 @@
1
+ [https://teratail.com/questions/115805](https://teratail.com/questions/115805)
2
+
3
+ こちらの質問の続きになってしまうのですが、
4
+
5
+ どのように同じページに値を送受信できますでしょうか？
6
+
7
+
8
+
1
9
  ```html
10
+
11
+ <!-- エリア１ -->
2
12
 
3
13
  <div class="form-area active">
4
14
 
@@ -26,11 +36,13 @@
26
36
 
27
37
  </form>
28
38
 
29
- <div class="submit"><button><img src="images/check.png" alt="送信" /><span>確認画面</span></button></div>
39
+ <div class="submit"><button>確認画面</button></div><!-- このボタンを押すとエリア2が表示される -->
30
40
 
31
41
  </div>
32
42
 
33
43
 
44
+
45
+ <!-- エリア２ -->
34
46
 
35
47
  <div class="form-area">
36
48
 
@@ -40,41 +52,29 @@
40
52
 
41
53
  <form action="index_submit" method="get" accept-charset="utf-8">
42
54
 
43
- <p>会社名</p>
44
-
45
- <p>xxxxxxxxxx株式会社</p>
46
-
47
- <p>部署名</p>
48
-
49
- <p>xxxxxxxxx</p>
50
-
51
55
  <p>お名前</p>
52
56
 
53
- <p>xxxx xxxx</p>
57
+ <p><!-- ここに入力データを受け取る --></p>
54
58
 
55
59
  <p>ご連絡先 TEL</p>
56
60
 
57
- <p>03-xxxx-xxxx</p>
61
+ <p><!-- ここに入力データを受け取る --></p>
58
62
 
59
63
  <p>ご連絡先 Email</p>
60
64
 
61
- <p>xxxx@hoge.jp</p>
62
-
63
- <p>ご利用中・ご検討の証明書の枚数</p>
65
+ <p><!-- ここに入力データを受け取る --></p>
64
-
65
- <p>2</p>
66
66
 
67
67
  <p>お問い合わせ内容</p>
68
68
 
69
- <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>xxxxxxxxxxxxxxxxxxxxx<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>xxxxxxxxxxxxxxxxxxxxxxxx</p>
69
+ <p><!-- ここに入力データを受け取る --></p>
70
70
 
71
71
  </form>
72
72
 
73
73
  <div class="submit-box">
74
74
 
75
- <button><img src="images/back.png" alt="送信" /><span>もどる</span></button>
75
+ <button>もどる</button><!-- このボタンを押すとエリア１が表示される -->
76
76
 
77
- <button><img src="images/send.png" alt="送信" /><span>送信</span></button>
77
+ <button>送信</button><!-- このボタンを押すとエリア３が表示される -->
78
78
 
79
79
  </div>
80
80
 
@@ -82,20 +82,50 @@
82
82
 
83
83
 
84
84
 
85
+ <!-- エリア３ -->
86
+
85
87
  <div class="form-area">
86
88
 
87
- <h3 class="blue-title">お問い合わせいただき<br>誠にありがとうございます</h3>
89
+ <h3>送信しました。</h3>
88
90
 
89
- <p class="supplement">この度は、GMOグローバルサインのクーポン情報について<br>お問い合わせいただき、どうもありがとうございます。</p>
90
-
91
- <p class="supplement">担当者より追ってご連絡いたします。<br>早期のご連絡を心がけますので、今しばらくお待ち下さい。</p>
92
-
93
- <p class="supplement">万が一、数日経っても弊社からのご連絡が届かない際は、<br>恐れ入りますが下記までご連絡をいただけますと幸いです。</p>
94
-
95
- <p class="supplement">GMOインターネット株式会社<br>事業本部 メディア営業部<br>TEL： 0120-080-822<br><span>（ 営業時間 平日9:00 ～ 18:00 ）</span></p>
96
-
97
- <div class="submit-end"><button><img src="images/back.png" alt="送信" /><span>フォーム入力に戻る</span></button></div>
91
+ <div class="submit-end"><button>フォーム入力に戻る</button></div><!-- このボタンを押すとエリア１が表示される -->
98
92
 
99
93
  </div>
100
94
 
101
95
  ```
96
+
97
+ ```js
98
+
99
+ $(function(){
100
+
101
+ $('button').on('click',function(){
102
+
103
+ switch($(this).text()){
104
+
105
+ case "確認画面":
106
+
107
+ case "もどる":
108
+
109
+ $('.form-area:eq(0),.form-area:eq(1)').toggleClass("active");
110
+
111
+ break;
112
+
113
+ case "送信":
114
+
115
+ $('.form-area:eq(1),.form-area:eq(2)').toggleClass("active");
116
+
117
+ break;
118
+
119
+ case "フォーム入力に戻る":
120
+
121
+ $('.form-area:eq(0),.form-area:eq(2)').toggleClass("active");
122
+
123
+ break;
124
+
125
+ }
126
+
127
+ });
128
+
129
+ });
130
+
131
+ ```