- ベストアンサー
【javascript・PHP】プルダウン選択後、表示する金額を瞬時に変更する方法
- javascriptとPHPを組み合わせて、プルダウンの選択に応じて金額を表示する機能を実装したい
- データベースから取得した金額を選択したプルダウンに合わせて変更する方法を学びたい
- 現在の実装では、JavaScriptのコードに問題があり、正常に動作しないため、解決策を教えてほしい
- koucha714
- お礼率75% (21/28)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
回答はもう出ていると思いますが… 基本的に、phpはブラウザから表示のリクエストがあったときにそれに応じた内容のHTMLを送信する。 javascriptは、ブラウザがデータを受け取って表示し、ユーザが操作したときに動作。 なので、タイミングがまったく違います。（No3様が回答済） ついでながら、ご提示のソース及び補足では、onchange="getText(this)に対して、function check1() {～～ となっていて、関連性が見られません。 それなので、 （1）phpは初期状態のHTMLを送信（最初に表示される内容） ユーザが操作した値に応じて、スクリプトがphpにリクエストを送信 phpはそれを受け取り、再度、表示データ部分を入れ替えたHTMLを送信 ブラウザがその内容を表示（リフレッシュする） （2）ユーザが操作したときに、スクリプトでphpに選択値を送信 phpはそれを受け取り、対応するデータを出力 スクリプトがphpからのデータを受け取り、ブラウザに表示 （変更部分のみ表示が変わる） （3）最初にphpで出力する際に、全部のケースのデータを送信 スクリプトで初期表示状態をセット（不要なものは表示しない） ユーザの操作に応じて、スクリプトで表示するデータを入れ替える。 （変更部分のみ表示が変わる） みたいな処理のどれかになるのではと思われます。 （1）はNo.3様が回答なさっている方法。 （2）はajaxと言われる方法です。ぐぐればいろいろ資料が見つかると思います。 （3）はselectの数が多いと最初のデータ量が多くなるなどの場合は不向き。 （逆に少量のデータならこの方法のほうが簡単） で、以下は（3）の場合の例。 （HTMLソースで記していますので、phpからはこんな感じのソースを送信する） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <select name="dealer" id="dealer"> <option value="dealerA">問屋A</option> <option value="dealerB">問屋B</option> <option value="dealerC">問屋C</option> </select> <hr> <div id="dealerA"> 問屋Aが選ばれた場合に表示する内容 </div> <div id="dealerB"> 問屋Bが選ばれた場合に表示する内容 </div> <div id="dealerC"> 問屋Cが選ばれた場合に表示する内容 </div> <script type="text/javascript"> <!-- (function(id) { function change(s) { var i, n, sel = s.selectedIndex; for (i = 0; i<s.options.length; i++) { n = document.getElementById(s.options[i].value); if (n) n.style.display = i == sel?"block":"none"; } } var a = document.getElementById(id); change(a); a.onchange = function() { change(this); }; })("dealer"); // ←対象selectのidを指定 //--> </script> </body> </html>
その他の回答 (4)
- yyr446
- ベストアンサー率65% (870/1330)
例えば・・・） $sql = "select dealerA_price from price" $rs = mysql_query($sql, $link); // $linkはデータベース接続のための関数 $sql2 = "select dealerB_price from price" $rs2 = mysql_query($sql2, $link); というように2つのsql文を記述して、選んだプルダウンの内容により出力する値を変えるということができるでしょうか？ ==>何か、RDBの利用の仕方も十分ご理解されてないような気がしますが．．．。 priceテーブルの定義内容が知れないのでなんともいえませんが、 普通ＳＱＬは SELECT 列名[,列名,列名,列名....] from テーブル名 [WHERE 列名＝’キー値’[AND/OR...]] じゃないしょっか。（[]内は省略可） 何故２回に分けてSQL発行するんですか $sql = "select dealerA_price,dealerB_price from price" $rs = mysql_query($sql, $link); // $linkはデータベース接続のリソース変数 とすれば、レコードセットに両方の価格が取れますよね。 細かいところは、全体の姿が何とも見えないので、これ以上ご解答できませんが、 POST/GETされてくるAとかBとかの値を元に価格を取得出来る形にテーブル定義や クエリーを工夫された方がよいような気がします。 ※ちなみに、POST/GETされた値をそのまんま、$sqlに突っ込むのは非常に危険です。 mysql_real_escape_string() でインジェクション攻撃をブロックする必要が あります。（知ってますよね）
お礼
様々なご指摘ありがとうございます。 そして完全におかしなsql文などを書いてしまい、申し訳ございませんでした。 >$sql = "select dealerA_price from price" >$rs = mysql_query($sql, $link); // $linkはデータベース接続のための関数 >$sql2 = "select dealerB_price from price" <$rs2 = mysql_query($sql2, $link); とありましたが、 これは $sql = "select price_A from price" //dealerA_priceではなくprice_A $rs = mysql_query($sql, $link); // $linkはデータベース接続のための関数 $sql2 = "select price_B from price" //上記と同じ理由 $rs2 = mysql_query($sql2, $link); でした。ご迷惑をおかけしました。 あまり時間がなかったので例文のコーディングがひっどい事に・・・。 次回からは少し冷静になって質問させていただきます。 これからも何かとお世話になるかと思いますが、よろしくお願いします。 色々と、ありがとうございました。
- yyr446
- ベストアンサー率65% (870/1330)
クライアント側でjavascriptの関数check1() が実行される時には、 もうすでにサーバー側のPHPの処理は終わっているはず。 プルダウンで「A店」が選択されたタイミングで、javascript関数を 使って、もう一度リクエストパラメーターをセットし、自分自身をGETなりPOST なりして、サーバー側でPHPを実行させ、PHP側でリクエストパラメーターを判定して、 $priceに値をセットしなければならないでしょう。
お礼
遅くなりましたが、回答ありがとうございます。 そうですか、やはりこの方法では瞬時に（ページ更新などをせずに）値段表示を変えることは難しいみたいですね・・・。 ではもうひとつだけ質問があるのですが、 二つのデータベース接続を行い、選んだプルダウンの内容により、表示を変更させることってできないですか？ 例えば・・・） $sql = "select dealerA_price from price" $rs = mysql_query($sql, $link); // $linkはデータベース接続のための関数 $sql2 = "select dealerB_price from price" $rs2 = mysql_query($sql2, $link); というように2つのsql文を記述して、選んだプルダウンの内容により出力する値を変えるということができるでしょうか？ それができれば私が行いたいこともできるのですが・・・。 お礼文なのに質問をしてしまい、申し訳ございませんが、どうかよろしくお願いします。
- nine999
- ベストアンサー率44% (512/1140)
関係ないとは思いますがtextについて訂正します。 'a = document.myform.dealer[document.myform.dealer.selectedIndex].text; 選択肢の番号を取得して、指定しないとtextは取得できません。 valueでやる方が良いですが、optionタグ内に表記が必要です。
- nine999
- ベストアンサー率44% (512/1140)
基本的な確認ですが、タグはどうなってるでしょうか。 <select><option value="a">問屋A<option value="b">問屋B</select> となっている場合、「問屋A」「問屋B」はdocument.myform.dealer.textで取得します。 document.myform.dealer.valueは上記タグでは「a」「b」になります。 まずは、変数aに何が入っているか確認するのがよろしいかと思います。 alert(a);を途中に埋め込んで見てください。
補足
早速の回答ありがとうございます。 忘れていました（汗） <select>タグはDBから取得したデータをプルダウンで表示させているので、以下の記述になっています。 echo '<select name="dealer" onchange="getText(this);">'; while ($row = mysql_fetch_assoc($res)) { foreach($row as $key => $val) { echo "<option value='{$row['name']}'>{$row['name']}</option>"; } echo '$select'; } echo '</select>'; 念のためalert(a);等でチェックをしましたが、 valueもtextも同じなので、 問屋Aを選ぶとalertで「問屋A」と出ますし、問屋Bを選ぶと「問屋B」と出現します。 これまでは、一応大丈夫です。 後はその問屋を選択した直後にデータベースから金額を引っ張り出して、 瞬時に金額をテキスト（できるだけテキストボックスでないほうが望ましい）に反映できればいいのですが・・・。
お礼
かなり詳しく書いていただき、ありがとうございます。 ajaxは今習得できるほどの時間がないので、参考までにさせていただきます。 その他のケースも詳しく書いていただいたので、助かります。 本当にありがとうございました。