ある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で質問しましょう!
似たような質問が見つかりました
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- CGI htmlからパラメータで、cgiに渡したい。 1 2023/02/06 16:15
- その他(プログラミング・Web制作) seleniumbasic chrome操作について 1 2023/03/29 15:40
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- HTML・CSS ただいま勉強始めたての初心者です。フォームを縦並べにしたいです。 2 2022/11/20 17:18
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
フォームを再送信しますか?
-
apacheでPerl CGIが作動せず、5...
-
入力フォーム(電話番号)
-
CGI.pmはもう古い!?
-
太鼓
-
htmlからパラメータで、cgiに渡...
-
CGIって何ですか?簡潔に教えて...
-
ホームページでCGIのフォームを...
-
エクセルで集計したい。
-
文字コード変えたら動かなくな...
-
ラジオボタンの内容を受けてCGI...
-
めちゃきれい
-
number 改行が追加できない
-
生成AI画像について
-
3DCG
-
ホームページにメールフォーム...
-
cgi アクセス制限 エラー
-
CGIの記述について教えてくださ...
-
CGIの設置が分かりません・・・
-
ホームページにCGIを設置したの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
wordの数式について 定積分を書...
-
WEBページを強制的に横画面で見...
-
[HTML]プルダウンメニューの横...
-
VB.net データーグリッドビュー...
-
MSPゴシックで、一番幅を取る文字
-
onMouseoverで下線表示したい(...
-
テキストBOXの縦幅
-
EXCELとの連携
-
硬質カードケースについて 縦向...
-
横スクロールを縦スクロールに...
-
シングルコーテーション(')と...
-
javascript ColorBoxの最大縦幅...
-
pythonのnumpyでの列(縦)ベク...
-
何故横ナビ主流?
-
カウントダウンを何個も表示し...
-
縦線、横線の作成
-
FLASH初心者です。レイヤーを使...
-
OBJECTタグで、PARAMを使用する...
-
表示倍率の求め方
-
ネットで買い物をしていてわか...
おすすめ情報