• 締切済み
  • すぐに回答を!

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

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

noname#159858
noname#159858

共感・応援の気持ちを伝えよう!

  • 回答数6
  • 閲覧数1392
  • ありがとう数5

みんなの回答

  • 回答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> <!-- q7371675 -->

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • asp上でのラジオボタンについて

    aspのプログラムでラジオボタンを設置し、「検索」というボタンをクリックすることで、ラジオボタンに対応する一覧データを表示するというプログラムを作っています。 ラジオボタンを「パターン1」、「パターン2」という2つを作り、どちらかチェック出来るようにしたのですが、検索ボタンをクリックすると、パターン1、パターン2のどちらをチェックしていても、パターン1にチェックされている状態になってしまいます。 一応、初期表示状態として、パターン1にチェックされた状態になっているのですが、パターン2をチェックしていてもパターン1に戻ってしまいます。 検索後も、チェックしたラジオボタンのまま表示させる方法として何かいいやり方があれば、教えてください。

  • ラジオボタンについて。

    データの更新を行なう画面をつくり、データベースから取得したデータをもとにテキストの内容やラジオボタンのチェックの有無を画面に表示させようとしています。 最初に更新画面を呼び出し、データを表示することはうまくいくました。 しかし、IEの[表示]-[エンコード]や[最新の状態に更新]をやったり、戻るボタンで戻ると、テキストの内容は表示されるのですが、ラジオボタンは、なぜか一瞬チェックした後に、すぐチェックが外れてしまいます。 今やっているのは、Webの画面全てをASPで表示した後で、 最後にJavaScriptにより、 <script language='javaScript'> ラジオボタン名(i).checked = true; </script> のようにやっているのですが。。。 このやり方がまずいのでしょうか? 最初にボタン設定する際に"<INPUT TYPE ='radio' ~ checked>"で指定しなければいけないのでしょうか? よろしくお願いします。

  • ボタンとラジオボタンの連動

    「男性です」「女性です」のボタンを押すと、ラジオボタン「男性」「女性」がチェックされるページを作成しています。 ボタンとラジオボタンそれぞれのソースは、 <p><input type="submit" value="男性です" name="man"></p> <p><input type="radio" value="1" name="seibetsu"<?php if($man)<ここがわかりません>?>>男性 </p> を考えていますが、ボタンをクリックするとそれに対応したラジオボタンに勝手にチェックが入る連動のPHPソースの書き方がわかりません。 どなたかご教授ください。 よろしくお願いします。

    • ベストアンサー
    • PHP
  • 回答No.5

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

共感・感謝の気持ちを伝えよう!

質問者からのお礼

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

  • 回答No.4

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

共感・感謝の気持ちを伝えよう!

質問者からのお礼

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

質問者からの補足

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

  • 回答No.3

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

共感・感謝の気持ちを伝えよう!

質問者からのお礼

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

  • 回答No.2
  • yambejp
  • ベストアンサー率51% (3827/7415)

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

共感・感謝の気持ちを伝えよう!

質問者からのお礼

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

  • 回答No.1

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

共感・感謝の気持ちを伝えよう!

質問者からのお礼

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

質問者からの補足

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

関連するQ&A

  • aspのラジオボタン

    こんばんわ。 aspでチェックの入っているラジオボタンを150個表示したのですが、「全て解除」ボタンを押すと150のチェックを外したいのです。 どのように記述したらよいのでしょうか? 調べてはいるのですが、四苦八苦でなかなか進みません。 よろしくお願い致します。

  • イベント時のラジオボタンについて

    今ラジオボタンを3つ用意しています。 『はい』『いいえ』『どちらでもない』 クリアボタンが用意されていて ボタンを押すと、ラジオボタンの設定が 『はい』にチェックされるようにしたいのですが、 どのようにすればいいのでしょうか? 宜しくお願い致します。

  • JavaScript ラジオボタン データを別ページに渡す

    こんにちは、初投稿させていただきました プログラミングは始めて半年程度の未熟者です。 CGI・PerlとCを中心に独学でやってきましたが ホームページの製作をしてみようと思い、 ついこの前からJavaScriptにも挑戦してみています。 その中で「チェックされたラジオボタンの情報を別ページに渡す」 ということをやってみたいのですが、なかなか上手く行きません。 調べてみたところ、 結構同じような質問はあるのですが… どれもちょっとやりたいことと外れてました。 ・やりたいこと-------------------------------- Aページ ・ラジオボタンチェック ↓ 次のページにAでチェックしたボタンの情報を渡す Bページ ・ラジオボタンチェック       (渡って来た情報は表示せず保持したまま) ↓ 次のページにA,Bでチェックしたボタンの情報を渡す Cページ ・ラジオボタンチェック       (渡って来た情報は表示せず保持したまま) ↓ 次のページにA,B,Cでチェックしたボタンの情報を渡す ・ ・ ・ と、いう風に 連続して情報を次へ次へと渡していければなぁ と思います。 どこかのサイトの「~診断」と同じような感じです。 ただ、「ブラウザがあれば実行可能」というものを作りたいのです。 (インターネットに繋がなくても使用可能) ------------------------------------------------------- ・わからないこと ラジオボタンをチェック状態を取得して 次ページに移った時の「読み込みと処理の仕方」が分からないです… 渡って来た情報をどんな風な形にまとめて保持したまま 次ページに渡すのか@@ 書き方がイマイチ分かりません…それとも無理なんだろうか… 「分からないことやるなよ…」と思われるかもしれませんが 何卒ヒントだけでも教えて貰えないでしょうか。

  • ラジオボタンの作り方

    Flash8とwinXPを利用しています。 ラジオボタンについて教えてください。 《A》《B》《C》3つのムービークリップを作りました。 ラジオボタン(1)ALL (2)A (3)B (4)C の4つを作り、false・trueを使用して  (1)をクリックすると A・B・C 全部が表示  (2)をクリックすると A のみ表示  (3)をクリックすると B のみ表示  (4)をクリックすると C のみ表示 という画面を作りたいと思っています。 【チェックボタン】では作成できたのですが、【ラジオボタン】の "Group"? がよく分からなくてうまくゆきません。 初歩的なことだと思うのですが注意点等を含めて、教えてください。

    • ベストアンサー
    • Flash
  • ラジオボタンのチェック

    VB2010で作成してるんですけど。 ラジオボタンをフォームに入れてデバッグすると、ラジオボタンがチェックされて表示されてしまいます。。 Form_Loadでラジオボタンのチェックを外すコードは書いたんですけど・・。 RadioButton1.Checked = False という風に。 でもやはりチェックがついています。。 どうしたらチェックを外した状態で表示できるでしょうか?

  • ラジオボタンの分岐方法に関して

    稚拙な質問で申し訳ないんですが ラジオボタンを「はい」と選択し、ページ下の送信ボタンを押すとa.htmlへ ラジオボタンを「いいえ」と選択し、ページ下の送信ボタンを押すとb.htmlへ という処理を行いたいのですがどのようなコードを書けばいいのでしょうか? どなたか教えてください。 私事で恐縮なのですが、今週の水曜までに完成させないといけなくて困ってます。宜しくお願い致します。

  • 複数のラジオボタングループを動的に作成するには?

    こんにちは。 MySQLのデータと連動してフォームでラジオボタンの入ったプログラムを書いているのですが、どうも期待したように動作させることができません。よろしくお願いします。 MySQLから検索してきたデータを一覧形式で表示し、各行に3つの選択枝を持ったラジオボタン群をつけたい。イメージとしては以下の通りです。 DATA 1 | あ | ●和食 ○中華 ○洋食 DATA 2 | い | ●和食 ○中華 ○洋食 DATA 3 | う | ○和食 ○中華 ●洋食 [更新ボタン] 更新ボタン1つなので、各行は 1つの<FORM></FORM>の中に入っています。各自のラジオボタンを name="syokuji1", "syokuji2"などと指定して動的に生成すれば受ける方のPHPでは $_POST["syokuji1"]などで取り出せるのですが、MySQLからのデータ数は一定ではないので、ループ等でデータを取り出せずに困っています。 希望はラジオボタンの値を syokuji[0], [1], [2]みたいな配列で取ってくることです。別に配列にこだわりませんが、ループ処理でデータを取り出せたらと考えています。 name="syoukuji[]"も試してみましたが、この場合全ラインで1つの選択しかできなくなってしまいました。 DATA 1 | あ | ○和食 ○中華 ○洋食 DATA 2 | い | ○和食 ○中華 ○洋食 DATA 3 | う | ○和食 ○中華 ●洋食 [更新ボタン] ソースを貼ろうかと思いましたが、とりあえずは仕様の方から質問させていただきました。 よろしくお願いします。

    • ベストアンサー
    • PHP
  • XAMPPのMySQLで削除済みレコードが表示される

    XAMPPのMySQLで削除済みレコードが表示される XAMPP1.7.3をWinXP Proにて運用しています。 PHPにてselectのSQLを実行したところ、削除済みのレコードが表示されるため困っています。 これまでの経緯は 1.phpMyAdminにてDBとテーブルを作成し、サンプルデータを4件登録 2.PHPからselectで条件なしで全レコードが表示されるのを確認 3.条件をつけてselectし、それぞれの条件にマッチしたレコードが表示されるのを確認 4.phpMyAdminにて1レコードを削除 5.条件をつけてselectし、削除したレコードが表示されるのを発見 6.phpMyAdminのSQLで同じ条件のSQLを実行し、削除レコードが表示されないのを確認 7.PHP側のselect後にDBCloseをしているかの確認 8.phpMyAdminにてテーブルの修復、最適化などを実行 9.MySQLの再起動 以上の操作をしてみましたが、やはりPHPからのSQLの結果に削除されたレコードが表示されてしまいます。 色々なサイトで同じような現象のTipsがないか探しましたが、見つけきれず質問させていただきます。 同じような現象に対しての対応を紹介したサイトや、対処方法をご教授下さい。 よろしくお願いします。

  • ラジオボタンについて

    htmlでラジオボタンを選択できないようにしたいんですけど可能でしょうか? そういうタグってありますかね? 先日他のサイトで見たらとある条件によってはラジオボタンが選択できないように灰色になって選択できないようになっていました。 JAVAスプリクトを使わないと無理なのでしょうか? できればそういうタグがあると便利です。 教授お願いいたします。

    • ベストアンサー
    • HTML
  • ラジオボタンに数字が?

    Windows98を使用しています。ラジオボタンに6とか8とかの数字が入ります。また、チェックボタンのところには□が無くなっていてチェックを入れることが出来ません。どうしてなんでしょう?いつの日か急にこのような状態になってしまいました。改良方法をお教え願います。