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

締切済

質問者：noname#159858
質問日時：2012/03/19 19:04
回答数：6件

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

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

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

最新から表示
回答順に表示

No.6

回答者： LancerVII
回答日時：2012/03/22 11:37

こんにちは。

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

==== 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-transitio …
<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>

- 0
- 件

通報する

No.5

回答者： LancerVII
回答日時：2012/03/21 08:22

こんにちは。

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

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

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

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

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2012/03/21 19:07

No.4

回答者： LancerVII
回答日時：2012/03/20 22:56

こんにちは。

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

この回答への補足

http://www.openspc2.org/reibun/JavaScript_techni …
このサイトの一部分を使えそうな気がしています。

補足日時：2012/03/21 01:17

通報する

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2012/03/21 01:12

No.3

回答者： LancerVII
回答日時：2012/03/20 13:27

こんにちは。

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

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

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

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

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

- 0
- 件

通報する

この回答へのお礼

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

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

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

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

通報する

お礼日時：2012/03/20 22:29

No.2

回答者： yambejp
回答日時：2012/03/19 21:12

ajaxを使うと裏でデータをもってくることができます。

ajax自体はjavascriptの技術の一つです。

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2012/03/20 08:42

No.1

回答者： LancerVII
回答日時：2012/03/19 20:35

こんにちは。

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

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