-PR-
締切済み

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

  • 困ってます
  • 質問No.4460018
  • 閲覧数1301
  • ありがとう数2
  • 気になる数0
  • 回答数5
  • コメント数0

お礼率 0% (0/5)

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

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

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

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

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

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

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

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

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

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




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

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

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

「分からないことやるなよ…」と思われるかもしれませんが
何卒ヒントだけでも教えて貰えないでしょうか。
通報する
  • 回答数5
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

回答 (全5件)

  • 回答No.1
レベル14

ベストアンサー率 71% (1325/1856)

どちら側の処理でデータを受けるのでしょう? サーバ側/クライアント側 チェックボックスなどをFORMのメンバーにして ページの遷移にはFORMのSubmit(送信)を使うとするなら サーバー側であれば Request.FormやRequest.QueryStringなどから情報が拾えます クライアント側ですとFORMをGETで送信するようにして document.locationからデー ...続きを読む
どちら側の処理でデータを受けるのでしょう? サーバ側/クライアント側

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

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


  • 回答No.2
レベル11

ベストアンサー率 50% (114/225)

FRAMEを活用すれば出来るんじゃないですか?
FRAMEを活用すれば出来るんじゃないですか?
  • 回答No.3
レベル11

ベストアンサー率 51% (98/192)

Cookie使うとか。 ...続きを読む
Cookie使うとか。
  • 回答No.4
レベル14

ベストアンサー率 61% (1594/2576)

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

>何卒ヒントだけでも教えて貰えないでしょうか。 っていうからヒントだけに^^; 共通スクリプト //クッキーを読み込む function getCookie( valueName ){ var value = '', c, cookies = document.cookie.split('; '); for(var i in cookies) if ...続きを読む
>何卒ヒントだけでも教えて貰えないでしょうか。
っていうからヒントだけに^^;

共通スクリプト
//クッキーを読み込む
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>
このQ&Aで解決しましたか?
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


新大学生・新社会人のパソコンの悩みを解決!

企業からの質問やアンケートを実施中

-PR-

ピックアップ

-PR-
ページ先頭へ