javascriptで別ファイルで変数を取得する。

解決済

質問者：nomnom20
質問日時：2014/08/31 16:53
回答数：4件

A.htmlで入力した文字をB.htmlに出るようにしたいのですが、全然出ません。
アラートは表示されるのですが、入力欄に何を打っても、　namae と出てしまいます。変数に何も入ってないようです。
これを〔javascript〕って入力すれば、アラートに〔javascript〕って出るようにしたいのですが、どうしたらよろしいでしょうか？

〔A.html〕
<script type="text/javascript">
var val=namae;
window.localStorage.setItem("result", val);
</script>
<form action="B.htm" id="form1" method="post" onsubmit="check()">
<p>名前<br><input type="text" name="namae" id="buttom" size="28" /></p>
<input type="submit" value="送信"/>
</form>

〔B.html〕
<script type="text/javascript">
var val = window.localStorage.getItem("result");
alert(val);
</script>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： ONEONE
回答日時：2014/09/03 00:33

■A.html------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>A.html</title>
<script>

/**
* バリデーション
*/
function _check(){
var name = document.getElementById("name").value;
if(name.length < 6){
alert("名前は6字以上でお願いしますだ。")
return false;
}
return true;
}

/**
* 送信
*/
function _submit(){
var name = document.getElementById("name").value;
// セッションストレージに一時保存
sessionStorage.setItem("formdata",name);

alert("送信データ:" + name);
return true;
}
</script>
</head>
<body>
<div>
<form action="B.html" method="post" onsubmit="return _submit();">
名前：<input type="text" id="name" name="name" value=""><br>
<input type="submit" value="送信" onclick="return _check();"><br>
</form>
</div>
</body>
</html>

■B.html---------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>B.html</title>
<script>
function _load(){
var name = sessionStorage.getItem("formdata");
alert("受信データ:" + name );

//受け取ったら消す
sessionStorage.removeItem("formdata");
}
</script>
</head>
<body onload="_load()">
<div>
B.html
</div>
</body>
</html>

- 0
- 件

通報する

No.3

回答者： ONEONE
回答日時：2014/09/01 23:21

B.htmlでalert(val)て書いてあるけど、valが宣言されてないです。

J.jsはA.htmlで呼び出してますか？
外だししなくてもA.htmlに書いてもよい。

余談
chromeを使っているのならF12キーでデベロッパーツールが使えます。使い方を勉強してみては。

プログラミングの基礎をもっと勉強されたほうが良いですね。
とりあえず変数の宣言と代入とかスコープとかね。

まずは動くお手本を書いて、その動きを理解し、カスタマイズしていくってのがわかりやすいとおもいます。

この回答への補足

var val=sessionStorage.getitem('result');
alert(val);

こういうことですかね・・・・？
なんか一向にできなくなってしまいました。。。
http://detail.chiebukuro.yahoo.co.jp/qa/question …
このサイトを見て、〔あ！！俺でもできそうじゃん〕って思ったんですが、、、、確かに僕自身基本的なこと全然わかってないと思います。

ただ、名前を入力してボタンを押したら、その入力欄の文字が別のＢ．HTMLに移るプログラミングを書きたかっただけなんですが、、、、

もし、ONEONEさんが名前を入力してボタンを押したら別のＨＴＭＬに渡されるプログラミングを書くとしたら、どう書きますか？

補足日時：2014/09/02 20:14

通報する

- 0
- 件

通報する

No.2

回答者： fujillin
回答日時：2014/09/01 16:55

すでにANo1様が回答なさっている通りなのですが…

ご提示のA.htmlのスクリプトに、onsubmitで指定されている関数 check() が記載されていませんが、ちゃんと作成されているでしょうか？
もしかすると、ないのではないかと気になりました。

あとは単純なwebStrageへの読み書きなのでそれほど問題になるとは思えません。
使用なさっているブラウザはStrageに対応しているブラウザですよね？

この回答への補足

check()は記載されていましたが、ここで質問した後、
〔あれ？これいらねーじゃん〕って思ってすぐ消しました。
それでもできませんでした。
ブラウザはグーグルクロームを使ってます。

補足日時：2014/09/01 20:49

通報する

- 0
- 件

通報する

No.1

回答者： ONEONE
回答日時：2014/09/01 09:39

//名前のテキストボックスから入力値を取得

var val = document.getElementById(’buttom').value;
//セッションストレージに保持
sessionStorage.setitem('result', val);

この記述をcheck()の中のしかるべき場所に記述してください。
たぶんcheck()は入力内容が正しい形式かどうかを確認するための処理を記述しているのかと思います。
入力値が正しい形式ならば、上記コードが走るように、NGだったら走らないようにしてください。

B.htmlで受け取るときはsessionStorage.getitem('result')で受けとってください。

localStorageは消さない限り残ってしまうので、このようなフォームではsessionStorageが良いです。

この回答への補足

回答ありがとうございます。
こういうことでしょうか？

〔A.html〕
<form action="newfile2.htm" id="form1" method="post" onsubmit="check()">
<p>名前<br><input type="text" name="namae" id="buttom" size="28" /></p>
<input type="submit" value="送信"/>
</form>

〔B.html〕
sessionStorage.getitem('result')
alert(val);

〔J.js〕
function check(){
var val = document.getElementById('buttom').value;
sessionStorage.setitem('result', val);
}

これでもできませんでした。
Ｂに移った後に、画面が真っ白なだけで、アラートすら作動しませんでした。