みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

ラジオボタンを押すと、表示が切り替わるようにしたい

現在phpとmysqlでショッピングサイトを作っています。

理想としてはラジオボタンのチェックを切り替えると、送信ボタン等を押さなくても、ラジオボタンより以下の商品の表示が切り替わるようにしたいです。

それぞれのチェックにSQLの条件を変えて、条件によって商品の表示を変えるようにしたいのですが、難しいでしょうか?

送信ボタンを押さなくてもする場合はjavascrpitでしょうか?

投稿日時 - 2012-03-19 19:04:25

QNo.7371675

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(6)

ANo.6

こんにちは。

ソースはどこかにアップロードするほどのことをしていないのでここに書きます。
(というか、別に大した処理していないです。決め打ちで文字列返しているだけです)

==== search.php(JSON文字列を表示する)
<?php
if ( isset($_POST) ) {
$category = $_POST['category'];
if ( $category === 'c1' ) {
$value = 'コーラ,ファンタ,CCレモン';
} else if ( $category === 'c2' ) {
$value = 'ポカリスエット,クー';
} else if ( $category === 'c3' ) {
$value = '南アルプスの天然水';
} else if ( $category === 'c4' ) {
$value = '太陽のマテ茶';
}
$array = array();
$array['data'] = $value;
print json_encode ( $array );
}
?>


==== index.html(通常submitで呼び出される)
<?php
$value = '';
if ( isset($_POST) ) {
$category = isset($_POST['category'])?$_POST['category'] : '';
if ( $category === 'c1' ) {
$value = 'コーラ,ファンタ,CCレモン';
} else if ( $category === 'c2' ) {
$value = 'ポカリスエット,クー';
} else if ( $category === 'c3' ) {
$value = '南アルプスの天然水';
} else if ( $category === 'c4' ) {
$value = '太陽のマテ茶';
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>【OKWave回答サンプル集】ラジオボタンを押すと、表示が切り替わるようにしたい</title>
<link rel="stylesheet" href="/okwave/qa/css/basic.css" type="text/css" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery','1');</script>
<script type="text/javascript">
$().ready ( function() {
$('#noajax input:radio').click ( function() {
$('#noajax form').submit();
});
$('#ajax input:radio').click ( function() {
$.post (
'search.php',
{ category:$(this).val() },
function ( data ) {
$('#ajax div.result').text ( data.data );
},
'JSON'
);
});
});
</script>
<style type="text/css">
div.category div.result {
width:600px;
height:150px;
border:solid 1px #ccc;
}
</style>
</head>
<body>
<h1>ラジオボタンを押すと、表示が切り替わるようにしたい(q7371675)</h1>
<h2>サンプル(Ajax)</h2>
<div id="ajax" class="category">
<form>
<h3>カテゴリ</h3>
<input type="radio" name="category" id="cb1" value="c1" /><label for="cb1">炭酸飲料</label>
<input type="radio" name="category" id="cb2" value="c2" /><label for="cb2">清涼飲料</label>
<input type="radio" name="category" id="cb3" value="c3" /><label for="cb3">ミネラルウォータ</label>
<input type="radio" name="category" id="cb4" value="c4" /><label for="cb4">お茶</label>
<hr />
</form>
<div class="result">
</div>
</div>
<h2>サンプル(通常のsubmit)</h2>
<div id="noajax" class="category">
<form action="index.html" method="post">
<h3>カテゴリ</h3>
<input type="radio" name="category" id="ca1" value="c1"<?= $category==='c1' ? ' checked="checked"':'' ?> /><label for="ca1">炭酸飲料</label>
<input type="radio" name="category" id="ca2" value="c2"<?= $category==='c2' ? ' checked="checked"':'' ?> /><label for="ca2">清涼飲料</label>
<input type="radio" name="category" id="ca3" value="c3"<?= $category==='c3' ? ' checked="checked"':'' ?> /><label for="ca3">ミネラルウォータ</label>
<input type="radio" name="category" id="ca4" value="c4"<?= $category==='c4' ? ' checked="checked"':'' ?> /><label for="ca4">お茶</label>
<hr />
</form>
<div class="result">
<?= $value ?>
</div>
</div>
</body>
</html>
<!-- q7371675 -->

投稿日時 - 2012-03-22 11:37:36

ANo.5

こんにちは。


>Ajaxと組み合わせなら通常のsubmitを使う部分があるとチェックが外れますが、
>Ajaxを使わず、通常だけなら、プルダウンを選択して、それより下の他のプルダウンを選択しても、チェックは外れないってこと>でしょうか。

それは作り次第です。
Ajaxを使うと、画面の遷移無しでデータ等を取得できるため、画面表示後にユーザにより操作されたものはそのままになり、特定の部分のみ取得したデータで書き換えますので結果的に値を保持している(語弊がありますが)ことになります。

画面遷移を行なってもサーバ側で適切にその値を取得してHTMLを書き出す段階でその値を使ってあげれば、ユーザにより選択されたものをそのままデフォルト値として扱うことが出来ます。

なので、作り次第になります。

投稿日時 - 2012-03-21 08:22:49

お礼

もしよろしければ、作って頂いたもののソースを見てみたいのですが、どこかにアップロードして見せて頂けませんでしょうか?
是非参考にしたいです。
よろしくお願い致します。

投稿日時 - 2012-03-21 19:07:23

ANo.4

こんにちは。

説明が不足してまして申し訳ございません。
Ajaxを使わなくても選択されていたものを保持しておくことは可能です。
(今回のサンプルはわかりやすいようにあえて保持しませんでした)

投稿日時 - 2012-03-20 22:56:18

補足

http://www.openspc2.org/reibun/JavaScript_technique/sample/03_form/019/index.html
このサイトの一部分を使えそうな気がしています。

投稿日時 - 2012-03-21 01:17:16

お礼

ごめんなさい何度も。
Ajaxと組み合わせなら通常のsubmitを使う部分があるとチェックが外れますが、
Ajaxを使わず、通常だけなら、プルダウンを選択して、それより下の他のプルダウンを選択しても、チェックは外れないってことでしょうか。

投稿日時 - 2012-03-21 01:12:00

ANo.3

こんにちは。

radioを選択 submitとかで検索したら出てきませんでしょうか。
(未確認です、すみません)

参考までにラジオが選択されたらsubmitし、カテゴリ別のデータを表示するものと、ラジオが選択されたらAjaxにてカテゴリ別のデータを表示するものを作ってみました。

==== 動作サンプル
http://hppg.moe.hm/okwave/qa/q7371675/


通常のsubmitですと、画面が一度リフレッシュされますのでAjaxで選択されたカテゴリはクリアされます。
Ajaxにてカテゴリを選択するとリフレッシュしませんので、通常のカテゴリで表示されているデータは消えずに、選択された値が表示されます。

最近はAjaxで非同期にデータを取得してHTML内を書き換える方法が多いのかもしれません。

投稿日時 - 2012-03-20 13:27:52

お礼

また遅くなり申し訳ございません。
作って頂けたのですか?申し訳ございません!

なるほど。。。複数のラジオボタンを使う予定なので、せっかく選択したものが消えると困ります。

ラジオを選択すると、下の別のラジオの項目が変わるようになっていくのでリフレッシュは問題です。

すると、ajaxを勉強するのが良さそうですね。
ajax radioとかで検索してみます。

投稿日時 - 2012-03-20 22:29:32

ANo.2

ajaxを使うと裏でデータをもってくることができます。
ajax自体はjavascriptの技術の一つです。

投稿日時 - 2012-03-19 21:12:41

お礼

ajaxはまだ勉強をしていないのですが、調べてみます。ありがとうございます。

投稿日時 - 2012-03-20 08:42:11

ANo.1

こんにちは。

そうですね、送信ボタンを押さないでsubmitさせるにはJavaScriptでラジオが選択された時にsubmitすれば良いと思います。

>それぞれのチェックにSQLの条件を変えて、条件によって商品の表示を変えるようにしたいのですが、難しいでしょうか?
submitを実行するのがボタンであるかどうかだけですので、サーバ側はどのラジオが選択されているか見て条件文を生成すれば良いと思います。

投稿日時 - 2012-03-19 20:35:36

補足

もしよろしければ参考になるサイト等教えて頂けませんでしょうか?よろしくお願い致します

投稿日時 - 2012-03-20 08:42:39

お礼

お返事遅くなり申し訳ございません。
なるほど。jsでそんなことが可能なのですね。調べてみます。
ありがとうございます。

投稿日時 - 2012-03-20 08:38:25

あなたにオススメの質問