dポイントプレゼントキャンペーン実施中!

ある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>

A 回答 (2件)

なぜわざわざiframeを使うのですか?


それぞれの質問を書いた部分以外は共通なのですから、最初の質問ページも含めて、すべてCGIで出力させるほうが楽ですよ。
 CGIにデータが渡される都度、それまでのデータはhiddenで保持しておけば良いです。
 そうすると、問題のあるiframeも使わなくてすみます。

この回答への補足

しばらく考えてみて分からないところはまた新しく質問させていただきたいと思います。
ありがとうございました!

補足日時:2013/08/13 09:55
    • good
    • 0
この回答へのお礼

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ページに回答を代入して表示させる方法が分かれば
もっと単純に作れそうだし、
わざわざインラインフレームを使わずにすみそうです。
どのようにしたらいいのでしょうか?
サンプルコードなど掲載されているサイトがあれば教えてください。

質問が下手ですみません。
よろしくお願いします!

お礼日時:2013/08/09 10:24

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とかで表示させればいいと思うけど・・・
長々とスイマセン
    • good
    • 0
この回答へのお礼

ありがとうございます!
上司からCGIを使うよう言われているのと
>Ajax使ってinnerHTMLとかで表示
ちょっとこのあたりがよくわからないので・・・
今後の参考にさせていただきます!
ありがとうございました!

お礼日時:2013/08/13 09:54

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!