formで入力した内容を他ページに送りたい

###前提・実現したいこと

一般的なお問合せフォームを作成しようとしています。
<form>で、<input type="text">などで入力した文字を他のファイルで受け取り、表示させたいと思っています。

###発生している問題・エラーメッセージ

<form method="get">で、URLには送れていることは確認できているのですが、
それを表示させるのが、うまくできません

どうかご助力をお願いします。

###該当のソースコード
送信側

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=Shift-Jis">
		<meta http-equiv="Content-Style-Type" content="text/css">
		<title>お問い合わせ</title>
				
		<script type="text/javascript">
		
		
		
		function jamp(){
			var name = document.getElementById("name").value;
			var mail = document.getElementById("mail").value;
			var question = document.getElementById("question").value;
			
			if (name.length == 0) {
			        alert("未入力の項目があります");
			        return false;
			    } else {
			    
			    if (mail.length == 0) {
			        alert("未入力の項目があります");
			        return false;
			    } else {
			    
			    if (question.length == 0) {
			        alert("未入力の項目があります");
			        return false;
			    } else {
				
				var savename = name;
				var savemail = mail;
				var savequestion = question;
				sessionStorage.setItem("savename", savename);
				sessionStorage.setItem("savemail", savemail);
				sessionStorage.setItem("savequestion", savequestion);
			    
			    
			    var target = document.getElementById("YATTA");
			    target.method = "get";
			    target.submit();
			    
			    return true;
				
				
				
				}
				}
			}
		}
		
		function save(){
			var name = document.getElementById("name");
			var mail = document.getElementById("mail");
			var question = document.getElementById("question");
			
			savename = sessionStorage.getItem("savename");
			savemail = sessionStorage.getItem("savemail");
			savequestion = sessionStorage.getItem("savequestion");
			
			name.innerHTML = savename;
			mail.innerHTML = savemail;
			question.innerHTML = savequestion;
		}
		
		</script>
		<style>
			.box1 {
				line-height:200%;
				background-color:#ffffff;
				border:solid #aaaaaa 2px;
				color:#000000;
				width:600px;
				padding:12px;
				font-size:16px;
				height:360px;
			}
			.box2{
				float:left;
				width:130px;
			}
			form{
				margin-bottom:-23px;
			}
			.text1{
				margin:-3px 224px;
			}
			.text2{
				width:100px;
				border:solid 2px #777777;
	
				float:left;
				margin:0px 10px 0px 10px;
				height:60px;
				background:#eeeeee;
			}
			
			.text5{
				width:100px;
				border:solid 2px #777777;
				float:left;
				margin:0px 10px 0px 10px;
				height:115px;
				background:#eeeeee;
			}
			.red{
				color:#ff0000;
			}
			hr{
				margin:-2px 0px 0px 0px;
			}
		</style>
	</head>	
	<body onLoad="save()">
		<div class="box1">
			<p class="text1">お問い合わせフォーム</p>
			
			<div class="box2">
			<p class="text2">名前<br><span class="red">※必須</span></p>
			<p class="text2">性別</p>
			<p class="text2">メールアドレス<span class="red">※必須</span></p>
			<p class="text5">お問い合わせ内容<br><span class="red">※必須</span></p>
			</div>
			<form method="get" action="2.html" id="YATTA" name="YATTA">
			
			<input type="text" name="name" id="name" size="50" style="margin-bottom:30px;margin-top:20px;" placeholder="名前を入力してください" value="">
			<br>
			
			<input type="radio" name="man" style="margin-top:20px;"><span class="text3">男性</span>
			<input type="radio" name="man" style="margin-bottom:40px;"><span class="text4" >女性</span>
			<br>
			
			<input type="text" name="mail" id="mail" style="margin-bottom:26px;" placeholder="メールアドレス" value="">	
			<br>
			
			<textarea name="question" cols="40" rows="8"  id="question" wrap="hard" value=""></textarea>
			<br>
			<input type="submit" value="確認画面へ" style="margin-left:240px;" onClick="return jamp(this.form)"><br>
			</form>
		</div>
	</body>
</html>

受け取り側

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=Shift-Jis">
		<meta http-equiv="Content-Style-Type" content="text/css">
		<title>お問い合わせ</title>
				
		<script type="text/javascript">
		
		function jamp1(){
			location.href = "1.html";
		}
		function jamp3(){
			location.href = "3.html";
		}
		
		function save(){
		document.form1.pram.value=name;
		}
		
		
		
	
		</script>
		<style>
			form {
				line-height:200%;
				background-color:#ffffff;
				border:solid #aaaaaa 2px;
				color:#000000;
				width:600px;
				padding:12px;
				font-size:12px;
			}
			.text1{
				margin:-3px 250px 10px;
			}
			.text2{
				margin:0px 0px;
			}
			.li1{
				width:100px;
				border:solid 2px #777777;
				float:left;
				margin:0px 10px -3px 10px;
				height:50px;
				background:#eeeeee;
			}
			.li2,
			#victory{
				width:400px;
				border:solid 2px #777777;
				float:left;
				margin:0px 10px -3px -12px;
				height:50px;
			}
			.li3{
				width:100px;
				border:solid 3px;
				float:left;
				margin:0px 10px -3px 10px;
				height:50px;
			}
			.li4{
				width:200px;
				border:solid 3px;
				float:left;
				margin:0px 10px -3px -12px;
				height:50px;
			}
			.li5{
				width:100px;
				border:solid 3px;
				float:left;
				margin:0px 10px -3px 10px;
				height:50px;
			}
			.li6{
				width:200px;
				border:solid 3px;
				float:left;
				margin:0px 10px -3px -12px;
				height:50px;
			}
			.li7{
				width:100px;
				border:solid 2px #777777;
				float:left;
				margin:0px 10px -3px 10px;
				height:150px;
				background:#eeeeee;
			}
			.li8{
				width:400px;
				border:solid 2px #777777;
				float:left;
				margin:0px 0px -3px -12px;
				
				max-height: 150px;
				height:150px;
			}
			
		</style>
	</head>	
	<body onLoad="save()">
		<form>
			<p class="text1">確認画面</p>
			
			<span class="li1">名前</span><div id="victory"> </div><br>
			<span class="li1">性別</span><span class="li2"> </span><br>
			
			<span class="li1">メールアドレス</span><span class="li2"></span><br>
			<span class="li7">お問い合わせ内容</span><span class="li8"></span><br>

		
		
			<br>
			
			<input type="button" value="修正" style="margin-left:220px;margin-top:10px;" onClick="jamp1()">
			<input type="button" value="送信" style="margin-left:0px;margin-top:10px;" onClick="jamp3()"><br>
		</form>
	</body>
</html>

###試したこと
以下のURLを参考にしました。
https://www.ipentec.com/document/document.aspx?page=javascript-submit-post-html-form

http://phpjavascriptroom.com/?t=js&p=location4

kei344

2016/11/03 09:13

どのように解決したかを回答欄に追記いただけませんか？このページに辿り着いた同じ疑問を持つ人のために、ぜひお願いします。

行動規範の内容に同意します

回答3件

ベストアンサー

formでの値の送信はもちろんjavascriptでもできますが、その値を受信したりするのは普通javascriptでは行いません。

参考にされたというサイトも一つ目がc#で受け取りをしている

ですので、javascriptではなくphpやjava、ruby(c#でもだめなわけではないですが、、、）などで書くようしてください。

もう一点、テキストエリアなど文字数がかなり多くなる場合、GETでは文字数制限がありますので、POSTにしましょう。

c#でした修正しました。

###追記
すいません２つ目のリンクURLからphpを使用しているものと早とちりしました。
読んでから追記します。

###追記
今回記載されているソースは値の引き渡しをGETで行う方法とSessionStorageで行う２つの方法がごっちゃになっているように見受けられます。どちらか片方を選択してつくり込みを行う事になると思います。

GETで行うのであれば

1.htmlからフォームの送信ボタンで2.htmlへ飛んだ際、GETでパラメータがURL欄に付与されているところまでは良いのですが、2.htmlのsava関数の中身、document.form1.pram.value=name;これでは何も起こりません、ここは２つ目のリンクのpramWriteを参考にURLから？以降を取得して、＆を区切り文字として文字列を分割し、＝区切りでパラメータ名、と値に分割して、formの各要素へjavascriptで動的に書かないといけません。

document.form1.pram.valueは意味はドキュメント内のnameがform1の中のnameがpramの値という意味ですので、参考リンクで言えば

<form name="form1" action="#">
            <fieldset>
                <legend>受け取ったパラメータを表示</legend>
                <textarea cols="40" rows="4" name="pram" style="border:0;overflow:visible" readonly="readonly"></textarea>
            </fieldset>

でいうテキストエリアへ文字がセットされます。
質問で記載されたコードの場合

<form>
            <p class="text1">確認画面</p>

のformおよび名前や性別の要素にもname属性をあたえるなりして、一つ一つjavascriptで取得した文字列を書いていかないといけません（参考サイトとはことなり、修正機能もあるので一つの文字列に変換するわけではないため、くっつけてしまってはいけないので。。）

次に、2.htmlから修正で1.htmlへ戻った際もURLの？以降の文字列を1.htmlの後ろにつけて1.htmlへ飛ばさないと1.htmlで値がとれません。URLに？以降もつけて飛ばせば、上記とにたような処理で1.htmlのformにも値を入れる事ができます。

SessionStorageの場合

1.htmlのsave関数にあるようにsavename = sessionStorage.getItem("savename");等のSessionStorageから値を取得する処理を2.htmlにも書かないと値をとる事ができません。またsessionStorageの機能を使う場合、GETで行うのであれば、の箇所で説明した、URLの？以降等の処理はいりません。

どちらが簡単かというとSessionStorageの方かなとは思いますが、できれば両方避けて、バックエンドで動作する言語phpやjava、rubyなどを覚えそちらと併用されることを推奨します。

値をフォームに補完するのはこんな感じで

        function save(){
            var name = document.getElementById("victory");
            var email = document.getElementById("email");
            var msg = document.getElementById("msg");

            savename = sessionStorage.getItem("savename");
            savemail = sessionStorage.getItem("savemail");
            savequestion = sessionStorage.getItem("savequestion");

            name.innerHTML = savename;
            email.innerHTML = savemail;
            msg.innerHTML = savequestion;
        }

    ~略~

        <form id="form1">
            <p class="text1">確認画面</p>

            <span class="li1">名前</span><div id="victory"> </div><br>
            <span class="li1">性別</span><span class="li2" id='gender'> </span><br>

            <span class="li1">メールアドレス</span><span class="li2" id='email'></span><br>
            <span class="li7">お問い合わせ内容</span><span class="li8" id='msg'></span><br>



            <br>

            <input type="button" value="修正" style="margin-left:220px;margin-top:10px;" onClick="jamp1()">
            <input type="button" value="送信" style="margin-left:0px;margin-top:10px;" onClick="jamp3()"><br>
        </form>

投稿2016/11/02 09:04

編集2016/11/02 10:13

hiim

総合スコア1689

fromageblanc

2016/11/02 09:17

質問からするに、勉強途中なのでサーバを仲介するという概念がまだ持ててないのかもですね。参考：フォームデータを送信する https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Forms/Sending_and_retrieving_form_data

hiim

2016/11/02 09:26

fromageblancさん＞　そうですね、、普段仕事でもこういった事をしているとまさかGETで受け取りもjavascriptでとは思いもかけずでした、ですが、読んでみるとたしかに２つ目のリンク、、、javascriptでGETパラメータから読んでますね、、、絶対推奨しませんが。。。だいたい内容把握できたので追記します。。。

tk.baha

2016/11/03 09:24 編集

hiimさんいろいろな所のものを参考にして試したり、日をまたいで記述したりして、いろいろ混ざってわかりにくかったかもしれませんが、素晴らしい回答をありがとうございます！ getになっていたのは、データが送れているかの確認のためで、特に意味はありませんでした。 SessionStorageの方も、記述した内容が2.htmlに移る度に消えないようにするためのものでした。結局は、postに変えて、SessionStorageから取り出す方法で行い、無事動作するようになりました！ phpやcgiはやったことがなかったので、javascriptだけで解決できたのが、非常に助かりました！改めて、問題を解決していただき、ありがとうございました！

hiim

2016/11/03 09:28

SessionStorageを使用して実行できてよかったです。ただし、今いただいたコメントで一つだけおそらく勘違いされてそうな箇所がありますのでそこだけコメントしておきます。「SessionStorageを使用して値の引き渡しができているのであればPOSTも必要ありません。」その部分は説明しだしたら延々と長文になってしまいますので、時間がある時にGETやPOSTとSessionStorageの違いを調べてみてください。

tk.baha

2016/11/04 13:40

返信ありがとうございました。POSTにした意味は特になく、当初、POSTで引き渡そうとしており、getにしておきたくなかったからでした。確かに、SessionStorageを使えば、もうGETもPOSTも意味がないですね、。非常に勉強になりました、ありがとうございました！

行動規範の内容に同意します

質問の内容が少々わかりにくかったのですが、初心者マークが付いていますし、初歩的な可能性もあるので。

<form>をsubmit処理する時点でサーバサイドへ送るのが普通です。つまりphpやcgi宛に送ります。なので、javascriptの問いからは外れますので、もし筋違いの場合はご了承ください。

今回のソースを見る限り、「フォームの内容を確認画面に送りたい」なんですかね。
まず<form>というタグにaction=xxxx.phpのような属性を追加します。
それでその対象宛にformタグ内にあるinput value=xxxxをそのファイルに送ります。
よって
・一旦自ファイル宛に内容をPOSTし、内容をセッション等に格納して確認ファイルへリダイレクトする
・最初からaction=確認画面.phpなどにしておき、その確認画面のphpで情報を受け取ってからHTMLファイルを表示させる
などの処理を行います。

確認画面から登録完了や戻るボタンを設置するにはまた工夫が要ります。
いろいろ情報は転がっていると思いますので探してみてください。
この一連の流れはphpで最もよく使う類の処理です。
if文並に重要な部分だと思っています。
簡単に済ませず、完全に理解することをオススメします。

投稿2016/11/02 09:55