teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

9

追記

2016/11/02 10:13

投稿

hiim
hiim

スコア1689

answer CHANGED
@@ -46,4 +46,39 @@
46
46
  どちらが簡単かというとSessionStorageの方かなとは思いますが、できれば両方避けて、バックエンドで動作する言語phpやjava、rubyなどを覚えそちらと併用されることを推奨します。
47
47
 
48
48
 
49
+ 値をフォームに補完するのはこんな感じで
49
50
 
51
+ ```
52
+ function save(){
53
+ var name = document.getElementById("victory");
54
+ var email = document.getElementById("email");
55
+ var msg = document.getElementById("msg");
56
+
57
+ savename = sessionStorage.getItem("savename");
58
+ savemail = sessionStorage.getItem("savemail");
59
+ savequestion = sessionStorage.getItem("savequestion");
60
+
61
+ name.innerHTML = savename;
62
+ email.innerHTML = savemail;
63
+ msg.innerHTML = savequestion;
64
+ }
65
+
66
+ ~略~
67
+
68
+ <form id="form1">
69
+ <p class="text1">確認画面</p>
70
+
71
+ <span class="li1">名前</span><div id="victory"> </div><br>
72
+ <span class="li1">性別</span><span class="li2" id='gender'> </span><br>
73
+
74
+ <span class="li1">メールアドレス</span><span class="li2" id='email'></span><br>
75
+ <span class="li7">お問い合わせ内容</span><span class="li8" id='msg'></span><br>
76
+
77
+
78
+
79
+ <br>
80
+
81
+ <input type="button" value="修正" style="margin-left:220px;margin-top:10px;" onClick="jamp1()">
82
+ <input type="button" value="送信" style="margin-left:0px;margin-top:10px;" onClick="jamp3()"><br>
83
+ </form>
84
+ ```

8

修正

2016/11/02 10:13

投稿

hiim
hiim

スコア1689

answer CHANGED
@@ -40,6 +40,7 @@
40
40
  次に、2.htmlから修正で1.htmlへ戻った際もURLの?以降の文字列を1.htmlの後ろにつけて1.htmlへ飛ばさないと1.htmlで値がとれません。URLに?以降もつけて飛ばせば、上記とにたような処理で1.htmlのformにも値を入れる事ができます。
41
41
 
42
42
  > SessionStorageの場合
43
+
43
44
  1.htmlのsave関数にあるように`savename = sessionStorage.getItem("savename");`等のSessionStorageから値を取得する処理を2.htmlにも書かないと値をとる事ができません。またsessionStorageの機能を使う場合、GETで行うのであれば、の箇所で説明した、URLの?以降等の処理はいりません。
44
45
 
45
46
  どちらが簡単かというとSessionStorageの方かなとは思いますが、できれば両方避けて、バックエンドで動作する言語phpやjava、rubyなどを覚えそちらと併用されることを推奨します。

7

修正

2016/11/02 09:59

投稿

hiim
hiim

スコア1689

answer CHANGED
@@ -13,17 +13,36 @@
13
13
  読んでから追記します。
14
14
 
15
15
  ###追記
16
- 今回記載されているソースは値の引き渡しをGETで行う方法とSessionStorageで行う2つの方法がごっちゃになっているように見受けられます。まずGETで行うのであれば
16
+ 今回記載されているソースは値の引き渡しをGETで行う方法とSessionStorageで行う2つの方法がごっちゃになっているように見受けられます。どちらか片方を選択してつくり込みを行う事になると思います。
17
17
 
18
- 1.htmlからフォームの送信ボタンで2.htmlへ飛んだ際、GETでパラメータがURL欄に付与されているところまでは良いのですが、2.htmlのsava関数の中身、`document.form1.pram.value=name;`これでは何も起こりません、ここは2つ目のリンクのよにURLから?以降を取得して、&を区切り文字として文字列を分割し、=区切りでパラメータ名、と値に分割して、form各要素へjavascript動的に書かないといけません。
18
+ > GETでうのであれば
19
19
 
20
- 次に、2.htmlから修正1.htmlへ戻ったURLの?以降文字列を1.htmlの後ろつけ1.html飛ばさないと1.htmlで値がとれません。
20
+ 1.htmlからフォームの送信ボタン2.htmlへ飛んだ、GETでパラメータがURL欄に付与されているところまでは良いですが、2.htmlのsava関数の中身、`document.form1.pram.value=name;`これでは何も起こりません、ここは2つ目のリンクの`pramWrite`を参考にURLから?以降を取得して、&を区切り文字として文字列を分割し、=区切りでパラメータ名、と値分割し、formの各要素javascriptで動的に書かないといけません。
21
21
 
22
- 次にSessionStorageの場合
23
- 1.htmlのsave関数にあるように`savename = sessionStorage.getItem("savename");`SessionStorageからを取得する処理を2.htmlにも書かない値をとる事がきません。
22
+ ` document.form1.pram.value`は意味はドキュメント内nameがform1の中のnameがpramの値という意味すので、参考リンクで言えば
24
23
 
24
+ ```
25
+ <form name="form1" action="#">
26
+ <fieldset>
27
+ <legend>受け取ったパラメータを表示</legend>
28
+ <textarea cols="40" rows="4" name="pram" style="border:0;overflow:visible" readonly="readonly"></textarea>
29
+ </fieldset>
30
+ ```
25
- どちらかの方法に統一した方がよとは思いますが、
31
+ うテキストエリアへ文字がセットされます
32
+ 質問で記載されたコードの場合
26
33
 
34
+ ```
35
+ <form>
27
- 今回のようにテキストエリアなどがあるフォームデータをGETで送信は絶対に推奨できません。
36
+ <p class="text1">確認画面</p>
37
+ ```
38
+ のformおよび名前や性別の要素にもname属性をあたえるなりして、一つ一つjavascriptで取得した文字列を書いていかないといけません(参考サイトとはことなり、修正機能もあるので一つの文字列に変換するわけではないため、くっつけてしまってはいけないので。。)
28
39
 
40
+ 次に、2.htmlから修正で1.htmlへ戻った際もURLの?以降の文字列を1.htmlの後ろにつけて1.htmlへ飛ばさないと1.htmlで値がとれません。URLに?以降もつけて飛ばせば、上記とにたような処理で1.htmlのformにも値を入れる事ができます。
29
41
 
42
+ > SessionStorageの場合
43
+ 1.htmlのsave関数にあるように`savename = sessionStorage.getItem("savename");`等のSessionStorageから値を取得する処理を2.htmlにも書かないと値をとる事ができません。またsessionStorageの機能を使う場合、GETで行うのであれば、の箇所で説明した、URLの?以降等の処理はいりません。
44
+
45
+ どちらが簡単かというとSessionStorageの方かなとは思いますが、できれば両方避けて、バックエンドで動作する言語phpやjava、rubyなどを覚えそちらと併用されることを推奨します。
46
+
47
+
48
+

6

修正

2016/11/02 09:59

投稿

hiim
hiim

スコア1689

answer CHANGED
@@ -19,7 +19,8 @@
19
19
 
20
20
  次に、2.htmlから修正で1.htmlへ戻った際もURLの?以降の文字列を1.htmlの後ろにつけて1.htmlへ飛ばさないと1.htmlで値がとれません。
21
21
 
22
+ 次にSessionStorageの場合
22
- SessionStorageの場合も1.htmlのsave関数にあるように`savename = sessionStorage.getItem("savename");`等のSessionStorageから値を取得する処理を2.htmlにも書かないと値をとる事ができません。
23
+ 1.htmlのsave関数にあるように`savename = sessionStorage.getItem("savename");`等のSessionStorageから値を取得する処理を2.htmlにも書かないと値をとる事ができません。
23
24
 
24
25
  どちらかの方法に統一した方がよいとは思いますが、
25
26
 

5

修正

2016/11/02 09:41

投稿

hiim
hiim

スコア1689

answer CHANGED
@@ -13,13 +13,13 @@
13
13
  読んでから追記します。
14
14
 
15
15
  ###追記
16
- 今回記載されているソースは値の引き渡しをGETで行う方法とsessionで行う2つの方法がごっちゃになっているように見受けられます。まずGETで行うのであれば
16
+ 今回記載されているソースは値の引き渡しをGETで行う方法とSessionStorageで行う2つの方法がごっちゃになっているように見受けられます。まずGETで行うのであれば
17
17
 
18
18
  1.htmlからフォームの送信ボタンで2.htmlへ飛んだ際、GETでパラメータがURL欄に付与されているところまでは良いのですが、2.htmlのsava関数の中身、`document.form1.pram.value=name;`これでは何も起こりません、ここは2つ目のリンクのようにURLから?以降を取得して、&を区切り文字として文字列を分割し、=区切りでパラメータ名、と値に分割して、formの各要素へjavascriptで動的に書かないといけません。
19
19
 
20
20
  次に、2.htmlから修正で1.htmlへ戻った際もURLの?以降の文字列を1.htmlの後ろにつけて1.htmlへ飛ばさないと1.htmlで値がとれません。
21
21
 
22
- セッションの場合も1.htmlのsave関数にあるように`savename = sessionStorage.getItem("savename");`等のセッションから値を取得する処理を2.htmlにも書かないと値をとる事ができません。
22
+ SessionStorageの場合も1.htmlのsave関数にあるように`savename = sessionStorage.getItem("savename");`等のSessionStorageから値を取得する処理を2.htmlにも書かないと値をとる事ができません。
23
23
 
24
24
  どちらかの方法に統一した方がよいとは思いますが、
25
25
 

4

追記

2016/11/02 09:40

投稿

hiim
hiim

スコア1689

answer CHANGED
@@ -10,4 +10,19 @@
10
10
 
11
11
  ###追記
12
12
  すいません2つ目のリンクURLからphpを使用しているものと早とちりしました。
13
- 読んでから追記します。
13
+ 読んでから追記します。
14
+
15
+ ###追記
16
+ 今回記載されているソースは値の引き渡しをGETで行う方法とsessionで行う2つの方法がごっちゃになっているように見受けられます。まずGETで行うのであれば
17
+
18
+ 1.htmlからフォームの送信ボタンで2.htmlへ飛んだ際、GETでパラメータがURL欄に付与されているところまでは良いのですが、2.htmlのsava関数の中身、`document.form1.pram.value=name;`これでは何も起こりません、ここは2つ目のリンクのようにURLから?以降を取得して、&を区切り文字として文字列を分割し、=区切りでパラメータ名、と値に分割して、formの各要素へjavascriptで動的に書かないといけません。
19
+
20
+ 次に、2.htmlから修正で1.htmlへ戻った際もURLの?以降の文字列を1.htmlの後ろにつけて1.htmlへ飛ばさないと1.htmlで値がとれません。
21
+
22
+ セッションの場合も1.htmlのsave関数にあるように`savename = sessionStorage.getItem("savename");`等のセッションから値を取得する処理を2.htmlにも書かないと値をとる事ができません。
23
+
24
+ どちらかの方法に統一した方がよいとは思いますが、
25
+
26
+ 今回のようにテキストエリアなどがあるフォームデータをGETで送信は絶対に推奨できません。
27
+
28
+

3

追記

2016/11/02 09:37

投稿

hiim
hiim

スコア1689

answer CHANGED
@@ -1,9 +1,13 @@
1
1
  formでの値の送信はもちろんjavascriptでもできますが、その値を受信したりするのは普通javascriptでは行いません。
2
2
 
3
- 参考にされたというサイトも一つ目がc#で受け取りをしている、2つ目はphpで処理しているサイトです。
3
+ 参考にされたというサイトも一つ目がc#で受け取りをしている
4
4
 
5
5
  ですので、javascriptではなくphpやjava、ruby(c#でもだめなわけではないですが、、、)などで書くようしてください。
6
6
 
7
7
  もう一点、テキストエリアなど文字数がかなり多くなる場合、GETでは文字数制限がありますので、POSTにしましょう。
8
8
 
9
- c#でした修正しました。
9
+ c#でした修正しました。
10
+
11
+ ###追記
12
+ すいません2つ目のリンクURLからphpを使用しているものと早とちりしました。
13
+ 読んでから追記します。

2

修正

2016/11/02 09:09

投稿

hiim
hiim

スコア1689

answer CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  参考にされたというサイトも一つ目がc#で受け取りをしている、2つ目はphpで処理しているサイトです。
4
4
 
5
- ですので、javascriptではなくphpやc#などで書くようしてください。
5
+ ですので、javascriptではなくphpやjava、ruby(c#でもだめわけではないですが、、、)などで書くようしてください。
6
6
 
7
7
  もう一点、テキストエリアなど文字数がかなり多くなる場合、GETでは文字数制限がありますので、POSTにしましょう。
8
8
 

1

修正

2016/11/02 09:07

投稿

hiim
hiim

スコア1689

answer CHANGED
@@ -1,7 +1,9 @@
1
1
  formでの値の送信はもちろんjavascriptでもできますが、その値を受信したりするのは普通javascriptでは行いません。
2
2
 
3
- 参考にされたというサイトも一つ目がjavaで受け取りをしている、2つ目はphpで処理しているサイトです。
3
+ 参考にされたというサイトも一つ目がc#で受け取りをしている、2つ目はphpで処理しているサイトです。
4
4
 
5
- ですので、javascriptではなくphpやjavaなどで書くようしてください。
5
+ ですので、javascriptではなくphpやc#などで書くようしてください。
6
6
 
7
- もう一点、テキストエリアなど文字数がかなり多くなる場合、GETでは文字数制限がありますので、POSTにしましょう。
7
+ もう一点、テキストエリアなど文字数がかなり多くなる場合、GETでは文字数制限がありますので、POSTにしましょう。
8
+
9
+ c#でした修正しました。