こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

JavaScript ラジオボタン データを別ページに渡す

こんにちは、初投稿させていただきました
プログラミングは始めて半年程度の未熟者です。

CGI・PerlとCを中心に独学でやってきましたが
ホームページの製作をしてみようと思い、
ついこの前からJavaScriptにも挑戦してみています。

その中で「チェックされたラジオボタンの情報を別ページに渡す」
ということをやってみたいのですが、なかなか上手く行きません。
調べてみたところ、
結構同じような質問はあるのですが…
どれもちょっとやりたいことと外れてました。

・やりたいこと--------------------------------

Aページ ・ラジオボタンチェック

↓ 次のページにAでチェックしたボタンの情報を渡す

Bページ ・ラジオボタンチェック
      (渡って来た情報は表示せず保持したまま)

↓ 次のページにA,Bでチェックしたボタンの情報を渡す

Cページ ・ラジオボタンチェック
      (渡って来た情報は表示せず保持したまま)

↓ 次のページにA,B,Cでチェックしたボタンの情報を渡す




と、いう風に
連続して情報を次へ次へと渡していければなぁ と思います。
どこかのサイトの「~診断」と同じような感じです。

ただ、「ブラウザがあれば実行可能」というものを作りたいのです。
(インターネットに繋がなくても使用可能)
-------------------------------------------------------
・わからないこと

ラジオボタンをチェック状態を取得して
次ページに移った時の「読み込みと処理の仕方」が分からないです…
渡って来た情報をどんな風な形にまとめて保持したまま
次ページに渡すのか@@
書き方がイマイチ分かりません…それとも無理なんだろうか…

「分からないことやるなよ…」と思われるかもしれませんが
何卒ヒントだけでも教えて貰えないでしょうか。

投稿日時 - 2008-11-07 12:02:39

QNo.4460018

困ってます

このQ&Aは役に立ちましたか?

2人が「このQ&Aが役に立った」と投票しています

回答(5)

ANo.5

>何卒ヒントだけでも教えて貰えないでしょうか。
っていうからヒントだけに^^;

共通スクリプト
//クッキーを読み込む
function getCookie( valueName ){
var value = '', c, cookies = document.cookie.split('; ');
for(var i in cookies)
if((c = cookies[i].split(/=/), c[0]==valueName)) return c[1]? unescape( c[1] ): '';
return false;
}
//クッキーの保存
function putCookie( valueName, value, day ){
document.cookie = valueName + '=' + escape( value )+ '; expires='
+ new Date( (new Date).getTime() + day * 86400000).toGMTString();
}

//イベントの追加
function addEvent(elementId, evt, eventHandler, flag){
var element = ( typeof( elementId ) == "string" )? document.getElementById( elementId ): elementId;
element./*@cc_on @if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/evt, eventHandler, flag);
}
//フォームのエレメントに値をセット
function setFormValue( element, val ){
var obj = ( typeof( element ) == "string" )? document.getElementById( element ): element; if(!obj)return false;
var objs = ( obj.id == element )? [obj]: document.getElementsByName( element );

for( var i = 0, mx = objs.length; i<mx; i++ ){
var obj = objs[i];
switch( objs[i].type ){
case 'text': case 'textarea': case 'button': case 'reset': case 'submit': case 'hidden':
objs[i].value = val; break;
case 'checkbox':
objs[i].checked = !!val; break;
case 'radio':
objs[i].checked = (objs[i].value == val); break;
case 'select-one':
for( var j=0, mx2=objs[i].options.length; j<mx2; j++)
objs[i].options[j].selected = (objs[i].options[j].value == val); break;
}
}
}
----------------------
test.html
<html>
<body>
<form>
<p>
ラーメンなら
<input type="radio" name="ra-men" value="sio">塩
<input type="radio" name="ra-men" value="miso">味噌
<input type="radio" name="ra-men" value="tonkotu">とんこつ
<input type="button" value="次へ" id="t1">
</p>
</form>

setFormValue( 'ra-men', getCookie('ra-men'));
addEvent( document.body, 'click', chkClick );
function chkClick(e){
var obj = e.target || e.srcElement;
if(obj.type && obj.type == 'radio') putCookie( obj.name, obj.value, 1);
if( obj.id=='t1' ) location.href = 'test1.html';

}
</script>
--------------------------
test1.html
<html>
<body>
<form>
<p>
ラーメンの具なら
<input type="radio" name="gu" value="niku">チャーシュー
<input type="radio" name="gu" value="kohn">コーン
<input type="radio" name="gu" value="bata">バター<br>
<input type="button" value="次へ" id="t2">
</p>
</form>

<script>
setFormValue( 'gu', getCookie('gu'));
addEvent( document.body, 'click', chkClick );
function chkClick(e){
var obj = e.target || e.srcElement;
if(obj.type && obj.type == 'radio') putCookie( obj.name, obj.value, 1);
if( obj.id=='t2' ) location.href = 'test2.html';
}
</script>
---------------
test2.html
<html>
<body>
<form>
<p>
ラーメンなら
<input type="radio" name="ra-men" value="sio">塩
<input type="radio" name="ra-men" value="miso">味噌
<input type="radio" name="ra-men" value="tonkotu">とんこつ
</p>
<p>
ラーメンの具なら
<input type="radio" name="gu" value="niku">チャーシュー
<input type="radio" name="gu" value="kohn">コーン
<input type="radio" name="gu" value="bata">バター<br>
</p>
</form>

<script>
setFormValue( 'gu', getCookie('gu'));
setFormValue( 'ra-men', getCookie('ra-men'));
addEvent( document.body, 'click', chkClick );
function chkClick(e){
var obj = e.target || e.srcElement;
if(obj.type && obj.type == 'radio') putCookie( obj.name, obj.value, 1);
}
</script>

投稿日時 - 2008-11-07 20:03:59

ANo.4

1)サーバ経由でよければ、通常のPOST(またはGET)で次のページへ渡す。
2)クライアント側だけで処理するなら
 同様に location.search を利用して可能ですが、これだと受け渡しが見えてしまいますね。
 この場合はクッキーを利用するのが良いかも。
(ユーザが拒否しているとダメだけど・・・って、スクリプトそのものも拒否されてたら、そもそも成り立たないけど)

投稿日時 - 2008-11-07 19:25:43

ANo.3

Cookie使うとか。

参考URL:http://www.tohoho-web.com/wwwcook.htm

投稿日時 - 2008-11-07 13:54:55

ANo.2

FRAMEを活用すれば出来るんじゃないですか?

投稿日時 - 2008-11-07 12:22:28

ANo.1

どちら側の処理でデータを受けるのでしょう? サーバ側/クライアント側

チェックボックスなどをFORMのメンバーにして
ページの遷移にはFORMのSubmit(送信)を使うとするなら
サーバー側であれば Request.FormやRequest.QueryStringなどから情報が拾えます

クライアント側ですとFORMをGETで送信するようにして
document.locationからデータを抽出しましょう

投稿日時 - 2008-11-07 12:09:36

あなたにオススメの質問