締切済み

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

2012/03/19 19:04

現在phpとmysqlでショッピングサイトを作っています。理想としてはラジオボタンのチェックを切り替えると、送信ボタン等を押さなくても、ラジオボタンより以下の商品の表示が切り替わるようにしたいです。それぞれのチェックにＳＱＬの条件を変えて、条件によって商品の表示を変えるようにしたいのですが、難しいでしょうか？送信ボタンを押さなくてもする場合はjavascrpitでしょうか？

noname#159858

PHP
回答数6
ありがとう数5

みんなの回答 （6）
専門家の回答

みんなの回答

LancerVII
ベストアンサー率51% (1060/2054)

2012/03/22 11:37 回答No.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>

ログインすると、全ての回答が全文表示されます。

LancerVII
ベストアンサー率51% (1060/2054)

2012/03/21 08:22 回答No.5

こんにちは。 >Ajaxと組み合わせなら通常のsubmitを使う部分があるとチェックが外れますが、 >Ajaxを使わず、通常だけなら、プルダウンを選択して、それより下の他のプルダウンを選択しても、チェックは外れないってこと>でしょうか。それは作り次第です。 Ajaxを使うと、画面の遷移無しでデータ等を取得できるため、画面表示後にユーザにより操作されたものはそのままになり、特定の部分のみ取得したデータで書き換えますので結果的に値を保持している（語弊がありますが)ことになります。画面遷移を行なってもサーバ側で適切にその値を取得してHTMLを書き出す段階でその値を使ってあげれば、ユーザにより選択されたものをそのままデフォルト値として扱うことが出来ます。なので、作り次第になります。

質問者

お礼 2012/03/21 19:07

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

ログインすると、全ての回答が全文表示されます。

LancerVII
ベストアンサー率51% (1060/2054)

2012/03/20 22:56 回答No.4

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

質問者

お礼 2012/03/21 01:12

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

質問者

補足 2012/03/21 01:17

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

ログインすると、全ての回答が全文表示されます。

LancerVII
ベストアンサー率51% (1060/2054)

2012/03/20 13:27 回答No.3

こんにちは。 radioを選択　submitとかで検索したら出てきませんでしょうか。 (未確認です、すみません) 参考までにラジオが選択されたらsubmitし、カテゴリ別のデータを表示するものと、ラジオが選択されたらAjaxにてカテゴリ別のデータを表示するものを作ってみました。 ==== 動作サンプル http://hppg.moe.hm/okwave/qa/q7371675/ 通常のsubmitですと、画面が一度リフレッシュされますのでAjaxで選択されたカテゴリはクリアされます。 Ajaxにてカテゴリを選択するとリフレッシュしませんので、通常のカテゴリで表示されているデータは消えずに、選択された値が表示されます。最近はAjaxで非同期にデータを取得してHTML内を書き換える方法が多いのかもしれません。

質問者

お礼 2012/03/20 22:29

また遅くなり申し訳ございません。作って頂けたのですか？申し訳ございません！なるほど。。。複数のラジオボタンを使う予定なので、せっかく選択したものが消えると困ります。ラジオを選択すると、下の別のラジオの項目が変わるようになっていくのでリフレッシュは問題です。すると、ajaxを勉強するのが良さそうですね。 ajax radioとかで検索してみます。

ログインすると、全ての回答が全文表示されます。

yambejp
ベストアンサー率51% (3827/7415)

2012/03/19 21:12 回答No.2

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

質問者

お礼 2012/03/20 08:42

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

ログインすると、全ての回答が全文表示されます。

LancerVII
ベストアンサー率51% (1060/2054)

2012/03/19 20:35 回答No.1

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

質問者