- 締切済み
JavaScript ラジオボタン データを別ページに渡す
こんにちは、初投稿させていただきました プログラミングは始めて半年程度の未熟者です。 CGI・PerlとCを中心に独学でやってきましたが ホームページの製作をしてみようと思い、 ついこの前からJavaScriptにも挑戦してみています。 その中で「チェックされたラジオボタンの情報を別ページに渡す」 ということをやってみたいのですが、なかなか上手く行きません。 調べてみたところ、 結構同じような質問はあるのですが… どれもちょっとやりたいことと外れてました。 ・やりたいこと-------------------------------- Aページ ・ラジオボタンチェック ↓ 次のページにAでチェックしたボタンの情報を渡す Bページ ・ラジオボタンチェック (渡って来た情報は表示せず保持したまま) ↓ 次のページにA,Bでチェックしたボタンの情報を渡す Cページ ・ラジオボタンチェック (渡って来た情報は表示せず保持したまま) ↓ 次のページにA,B,Cでチェックしたボタンの情報を渡す ・ ・ ・ と、いう風に 連続して情報を次へ次へと渡していければなぁ と思います。 どこかのサイトの「～診断」と同じような感じです。 ただ、「ブラウザがあれば実行可能」というものを作りたいのです。 (インターネットに繋がなくても使用可能） ------------------------------------------------------- ・わからないこと ラジオボタンをチェック状態を取得して 次ページに移った時の「読み込みと処理の仕方」が分からないです… 渡って来た情報をどんな風な形にまとめて保持したまま 次ページに渡すのか＠＠ 書き方がイマイチ分かりません…それとも無理なんだろうか… 「分からないことやるなよ…」と思われるかもしれませんが 何卒ヒントだけでも教えて貰えないでしょうか。
- hororipo
- お礼率0% (0/5)
- JavaScript
- 回答数5
- ありがとう数2
- みんなの回答 （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>
- fujillin
- ベストアンサー率61% (1594/2576)
1）サーバ経由でよければ、通常のPOST（またはGET）で次のページへ渡す。 2）クライアント側だけで処理するなら 同様に location.search を利用して可能ですが、これだと受け渡しが見えてしまいますね。 この場合はクッキーを利用するのが良いかも。 （ユーザが拒否しているとダメだけど・・・って、スクリプトそのものも拒否されてたら、そもそも成り立たないけど）
- ProKaseifu
- ベストアンサー率51% (98/192)
Cookie使うとか。
- Yanch
- ベストアンサー率50% (114/225)
FRAMEを活用すれば出来るんじゃないですか？
- redfox63
- ベストアンサー率71% (1325/1856)
どちら側の処理でデータを受けるのでしょう？ サーバ側/クライアント側 チェックボックスなどをFORMのメンバーにして ページの遷移にはFORMのSubmit(送信)を使うとするなら サーバー側であれば Request.FormやRequest.QueryStringなどから情報が拾えます クライアント側ですとFORMをGETで送信するようにして document.locationからデータを抽出しましょう
