あるhtmlページにラジオボタンを設置しています。
このボタンを選択したらこのページ、このボタンの場合はこのページ、
と、CGIを使って、選択したボタンによってさまざまなページにジャンプさせています。
最後に、判定結果を掲載するページとして、
インラインフレームを設置し、そのなかにcgiを読み込ませて
選択したラジオボタンによってそのなかに表示させるコメントを変えたいです。
Q1でaを選んだ場合はこのコメント、
Q2でbを選んだ場合はこのコメント、
と、拾ってくる質問が記載されているhtmlページが複数にわたります。
以下でいう、test2.cgiは、どのように記述したらいいでしょうか?
サンプルコードなど掲載されているサイトがあったら教えてください。
<ラジオボタンが設置してあるhtmlページ>
<form name="q1" action="test1.cgi" method="POST">
質問
<input type="radio" name="q1" value="q1_a">回答a
<input type="radio" name="q1" value="q1_b">回答b
<input type="radio" name="q1" value="q1_c">回答c
<input type="submit" value="判定" />
<コメントを表示させるhtmlページ>
判定結果をお知らせします
<div id="frame">
<iframe src="test2.cgi" title="判定結果">
</iframe>
No.1ベストアンサー
- 回答日時:
なぜわざわざiframeを使うのですか?
それぞれの質問を書いた部分以外は共通なのですから、最初の質問ページも含めて、すべてCGIで出力させるほうが楽ですよ。
CGIにデータが渡される都度、それまでのデータはhiddenで保持しておけば良いです。
そうすると、問題のあるiframeも使わなくてすみます。
Q1でa、Q2でaを選んだ人と、
Q1でa、Q2でbを選んだ人は、最終的に同じページに飛ぶんだけど、
最後の一言コメント欄で
Q2でaを選んだ人には○○、
Q2でbを選んだ人には××、
と表示させたいため、
一言コメント欄をインラインフレームにし、CGIを別のものにしようと考えました。
質問と回答がたくさんあって複雑なため、
CGIがぐちゃぐちゃになってしまうのが嫌で、
一言コメント欄だけ別のCGIで作ってみようと思ってこのような構造にしてみたのですが
CGIを分けるのは得策ではないですね。
少し話がずれますが、
たとえば
if ($q1 eq "q1_a") {
print "Content-type: text/html\n\n";
print "<HTML>\n";
print "回答内容"\n";
print "</HTML>\n";
exit(0);
}
とすれば、
q1でaを選択した場合、まっしろなページに「回答内容」と表示されるんですよね。
まっしろなページではなく、
CSSを使って作成したHTMLページに回答内容を表示させたいです。
ラジオボタンの選択結果をCGIで受けて、
それをHTMLページに代入する?ようなCGIが分からないので
結局、同じフォーマットで、回答内容が少しずつ違ったHTMLページをたくさん作成し、
CGIでそれぞれのページにリンクさせています。
おかげでCGIはとても簡単な記述でうまく動いていますが、効率が悪いやり方ですよね。
HTMLページに回答を代入して表示させる方法が分かれば
もっと単純に作れそうだし、
わざわざインラインフレームを使わずにすみそうです。
どのようにしたらいいのでしょうか?
サンプルコードなど掲載されているサイトがあれば教えてください。
質問が下手ですみません。
よろしくお願いします!
No.2
- 回答日時:
CGI使わなくてもHTMLとJavaScriptでできると思う
こんなんじゃだめなの?
--------------------------------------------------------------------------- ここから
<html>
<head>
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>ページ</title>
</head>
<script type="text/javascript">
<!--
function fDispChange(vl){
if(vl == "A"){
document.getElementById("page000").style.display = 'none';
document.getElementById("page001").style.display = 'inline';
document.getElementById("page002").style.display = 'none';
document.getElementById("page003").style.display = 'none';
}else if(vl == "B"){
document.getElementById("page000").style.display = 'none';
document.getElementById("page001").style.display = 'none';
document.getElementById("page002").style.display = 'inline';
document.getElementById("page003").style.display = 'none';
}else if(vl == "C"){
document.getElementById("page000").style.display = 'none';
document.getElementById("page001").style.display = 'none';
document.getElementById("page002").style.display = 'none';
document.getElementById("page003").style.display = 'inline';
}else{
document.getElementById("page000").style.display = 'inline';
document.getElementById("page001").style.display = 'none';
document.getElementById("page002").style.display = 'none';
document.getElementById("page003").style.display = 'none';
}
}
// -->
</script>
<body>
<div align="center">
<center>
<table border="1" width="300px">
<tr>
<td width="100%">
<p align="center">選択</td>
</tr>
<tr>
<td width="100%" valign="middle" align="center">
<form method="POST" action="#" name="f">
<p align="center">
<input type="radio" name="R1" value="A" onchange="fDispChange('A')">A
<input type="radio" name="R1" value="B" onchange="fDispChange('B')">B
<input type="radio" name="R1" value="C" onchange="fDispChange('C')">C
<input type="radio" name="R1" value="C" onchange="fDispChange('Z')">初期
</p>
</form>
</td>
</tr>
</table>
</center>
</div>
<p align="center"> </p>
<div align="center">
<center>
<table border="1" width="500px">
<tr>
<td width="100%">
<p align="center">記事表示</td>
</tr>
<tr>
<td width="100%">
<span id="page000" style="display:inline">
<p align="center">ここに記事が表示されます</p>
</span>
<span id="page001" style="display:none">
記事A<br>
記事A記事A記事A記事A記事A記事A記事A記事A記事A記事A<br>
記事A記事A記事A記事A記事A記事A記事A記事A記事A記事A<br>
記事A記事A記事A記事A記事A記事A記事A記事A記事A記事A<br>
</span>
<span id="page002" style="display:none">
記事B<br>
記事B記事B記事B記事B記事B記事B記事B記事B記事B記事B<br>
記事B記事B記事B記事B記事B記事B記事B記事B記事B記事B<br>
記事B記事B記事B記事B記事B記事B記事B記事B記事B記事B<br>
</span>
<span id="page003" style="display:none">
記事C<br>
記事C記事C記事C記事C記事C記事C記事C記事C記事C記事C<Cr>
記事C記事C記事C記事C記事C記事C記事C記事C記事C記事C<Cr>
記事C記事C記事C記事C記事C記事C記事C記事C記事C記事C<Cr>
</span>
</td>
</tr>
</table>
</center>
</div>
</body>
</html>
--------------------------------------------------------------------------- ここまで
インデントは消えると思うから適当につけてみてね
ソースが見えてしまうことに支障があるならAjax使ってinnerHTMLとかで表示させればいいと思うけど・・・
長々とスイマセン
ありがとうございます!
上司からCGIを使うよう言われているのと
>Ajax使ってinnerHTMLとかで表示
ちょっとこのあたりがよくわからないので・・・
今後の参考にさせていただきます!
ありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
wordの数式について 定積分を書...
-
VB.net データーグリッドビュー...
-
シングルコーテーション(')と...
-
Lightboxの表示位置に関して質...
-
チェックボックスとセレクトボ...
-
INPUT TYPE
-
VB初心者。小数点以下の表示で...
-
チェックボックスの返す値
-
ブックマークからのアクセスを...
-
このメールフォームが機能しな...
-
フォームで絞込み検索機能を持...
-
select値をhiddenのvalueに渡し...
-
フォームよりCGIへ複数の値をPO...
-
PHPの画像掲示板で一部の携帯電...
-
Error: No Recipient というエ...
-
FORMを中央に表示したい
-
CGIのforeach文
-
リストボックス(multipleなsel...
-
選択したファイル名を取得する...
-
IE以外のブラウザでキャッシュ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
wordの数式について 定積分を書...
-
WEBページを強制的に横画面で見...
-
[HTML]プルダウンメニューの横...
-
VB.net データーグリッドビュー...
-
MSPゴシックで、一番幅を取る文字
-
シングルコーテーション(')と...
-
EXCELとの連携
-
左右のフレームを同時にスクロ...
-
onMouseoverで下線表示したい(...
-
HTMLでのタイマーの設置
-
HDDの縦置きについて
-
テキストBOXの縦幅
-
横スクロールを縦スクロールに...
-
iPhoneサイトで横向き時自動で...
-
ラジオボタンの内容を受けてCGI...
-
ページの右側だけに1色の縦ラ...
-
誕生日のカウントダウン日数を...
-
下記のような、HTMLコードを作...
-
swfムービーを「XHTML」ファイ...
-
パソコンの縦置き
おすすめ情報