【javascript・PHP】プルダウン選択後、表示する金額を瞬時に変更する方法
- javascriptとPHPを組み合わせて、プルダウンの選択に応じて金額を表示する機能を実装したい
- データベースから取得した金額を選択したプルダウンに合わせて変更する方法を学びたい
- 現在の実装では、JavaScriptのコードに問題があり、正常に動作しないため、解決策を教えてほしい
- ベストアンサー
【javascript・PHP】プルダウン選択後、表示する金額を瞬時に
【javascript・PHP】プルダウン選択後、表示する金額を瞬時に変更する方法。 大変困っております。 今回はjavascriptとPHPを組み合わせたコーディングを行おうとしているのですが、 プルダウンを選択した直後、どれを選択したかにより、phpの関数「$price」に代入する値を変えるような仕様に変更したいのです。更に、その$priceに入れる値はデータベースで入力した金額を反映させたいのですが、うまくいきません。 かなり分かりづらいのですが、以下に一連の流れの例を記入します。 例） ----------------------------------------------------------- データベースの二つのテーブルがあり、 一つのテーブル(priceとします)の列には「price_A」と「price_B」というデータが、 もう一つのテーブルの列(dealerとします)には「店名」があります。 プルダウンに表示する内容はdealerテーブルの「店名」列に格納されている「A店」と「B店」を表示させます（データベースから取得し、プルダウンに反映） ここで、プルダウンで「A店」を選択すると、phpの関数（$price）にpriceテーブルの「price_A」の金額を代入し、 「B店」の選択すると、$priceに「price_B」の金額を代入します。 ----------------------------------------------------------- そして以下は現在記入しているjavascriptの問題である箇所を抜粋しました。 確実に間違いがあるのは分かっていますが、できればその解決策の伝授をお願いします。 ※PHP文内に書いているので、echoを使用しています。 <?php echo '<script type="text/javascript">'; echo 'function check1() {'; echo 'var a;'; echo 'a = document.myform.dealer.value;'; echo 'if (a == "問屋A") {'; $price = $row["dealerA_price"]; // 要改善1 echo '} else if (a == "問屋B") {'; $price = $row["dealerB_price"]; // 要改善2 echo '} } </script>'; ?> どうかよろしくお願いします。不明な点は随時補足にて記述させていただきます。
- 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」と出現します。 これまでは、一応大丈夫です。 後はその問屋を選択した直後にデータベースから金額を引っ張り出して、 瞬時に金額をテキスト（できるだけテキストボックスでないほうが望ましい）に反映できればいいのですが・・・。
関連するQ&A
- javascriptのプルダウンで項目外の表示可否
javascriptのプルダウンで一覧から項目を選択したら、プルダウンに表示する文字を一覧とは違うものに出来るかどうか。 説明文が分かりにくかったら申し訳ございません。 図と文字で説明すると以下のような感じです。 ============================ 前提：リストに表示させる項目は「ああああ」「いいいい」「うううう」 １．まず、プルダウンを開きます。 ［ ▽］ ――――― ｜ああああ｜ ｜いいいい｜←「いいいい」を選択する ｜ううううう ｜ ――――― ２．項目を選択する。 ［２番目▽］←「いいいい」を選択したが、「２番目」とプルダウンに表示させる。 ３．またプルダウンリストを開く ［２番目▽］ ――――― ｜ああああ｜ ｜いいいい｜ ｜ううううう ｜ ――――― 「２番目」と表示されたまま最初にあった全ての項目が表示される。 プルダウンは複数行あるグリッド（javascriptでもこの部品名か分かりませんが、エクセルみたいに動作する部品です）でＡ列に同じ種類が置かれます。 ↓こんな感じで Ａ列 ｜ Ｂ列 ｜ Ｃ列 ｜←ヘッダ部 ―――――――――――― [ ▽]｜ ｜ ｜ ←ボディ ―――――――――――― [ ▽]｜ ｜ ｜ ―――――――――――― [ ▽]｜ ｜ ｜ ―――――――――――― ============================ 上記のような動作はjavascriptでは可能でしょうか？ javascriptは門外漢で、プログラマーにjavascriptでは出来ない！と言われてしまっているのですが、VB的には出来るのだからjavascriptでも出来るのではないかと思っています。 ただ、動作させる場所がweb上なので自分が思っているものとは制限が違うのではないかもと思い、意見を言えない状態です。 ご存知のいらっしゃいましたら ・可能か否か 出来れば ・どのような作り方であれば実現できそうか （プルダウンを開いた時と閉じた時で処理を走らせればいいとか簡単でいいので） などを教えていただければ幸いです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- プルダウンで選択した文字が出た場合に金額を表示
A1列に寝台料金、B1列に霊柩料金、C1列に5種類の車をプルダウンで表示するようになっています。5種類の車は、エスティマ、エルグランド、ベンツ、センチュリー、リンカーンです。エスティマかエルグランドを選択すればA1列にエスティマなら10,000円でエルグランドなら12,000円。ベンツ、センチュリー、リンカーンを選択すればB1列にベンツなら30,000円、センチュリーなら40,000円、リンカーンなら50,000円とC1列のプルダウンで選択された車種によってそれぞれの列にそれぞれの車種の金額を表示したいです。 あまり縁起の良い質問ではなく申し訳ありません。 どうかよろしくお願いします。
- 締切済み
- Excel（エクセル）
- プルダウンでテキストエリア表示Javascript
JavaScriptをはじめて扱う初心者です。 このサンプルのテキストエリア（複数行）をプルダウンで内容を変更できるようにしたいと思っています http://www3.plala.or.jp/moananja/iroiro/Material/Calculator/Calc3.html プルダウンで項目Ａを選択すると AAA AAA AAA 項目Ｂを選択すると BBB BBB とテキストエリアに代入されるような機能を付けたいのですが、どのように書いたらよいでしょうか？ ネットで検索して、テキストエリアに代入する方法は下記で見つけたのですが、上のサンプルスクリプトと繋げ方が分かりませんでした ご教授よろしくお願いいたします http://q.hatena.ne.jp/1190481115
- ベストアンサー
- JavaScript
- プルダウン出た文字を各々の列に金額を表示させたい
A1列に寝台料金、B1列に霊柩料金、C1列に5種類の車をプルダウンで表示するようになっています。5種類の車は、エスティマ、エルグランド、ベンツ、センチュリー、リンカーンです。エスティマかエルグランドを選択すればA1列にエスティマなら10,000円でエルグランドなら12,000円。ベンツ、センチュリー、リンカーンを選択すればB1列にベンツなら30,000円、センチュリーなら40,000円、リンカーンなら50,000円とC1列のプルダウンで選択された車種によってそれぞれの列にそれぞれの車種の金額を表示したいです。 あまり縁起の良い質問ではありませんがまじめに焦っています。 どうかよろしくお願いします。助けてください。
- ベストアンサー
- Excel（エクセル）
- PHPをjavascriptで表示したいのですが。
PHPで書いたプログラムをブログパーツにしたいため、 javascriptで表示させたいのですが、 どうしたらよいのでしょうか？ ・表示させたいPHPのサンプル(動作は一応確認しました) ～ここから～ <?php $site = array( array("aaa","test1","テスト中なのでございます"), array("bbb","test2","テスト中なのでござる"), ); shuffle($site); $num = 1; for($a = 0; $a < $num; $a++) { echo("<center><p>".$site[$a][0]."</p><p>by <a href=\"http://test-test-sample.org/archives/".$site[$a][1]."\" target=\"_top\">".$site[$a][2]."</a></p></center>"); } ?> ～ここまで～ ネット調べたところ、PHPファイルに header("Content-type: application/x-javascript");を入れて、 echoにdocument.writeを付ければ、 <script type="text/javascript" src="http://test-test-sample.org/○○○.php"></script> で表示できると書いてあったのですが、うまくいきませんでした。 プログラミング素人のため、見当違いなことを言ってるかもしれませんが、 PHPやjavascriptにお詳しい方、どうかご教授を宜しくお願い致します。
- ベストアンサー
- PHP
- PHPとJavaScriptの連携
PHPとJavaScriptの連携に困っています。以下のようにフラグを立てテキストボックスに代入しています。 frm.newdata.value = '<?php if(条件) $flg = true; echo $newdata; ?>' そしてフラグがてばメッセージを出します。 <?php if($flg) echo 'alert("このデータは登録済みです");'; ?> ところがフラグ（$flg）を共有化したいのですが、上下で別物扱いになります。上の処理では代入をしているのでechoでメッセージまでは出せません。 対応策ご存じであれば教えてください。
- ベストアンサー
- PHP
- PHP プルダウンを選んだ瞬間に処理開始
PHPで、フォームのプルダウンを選んだ時、たとえば、「1月」を選んだ時に処理を開始し、選択されている1月のデータだけをデータベースからとってきて表示したいです。 <input type="submit" ～> の送信ボタンで送信するわけではなく、プルダウンを選んだ瞬間に処理開始したいので、$_POST[]では取得できませんでした。 PHPでプルダウンを選んだ瞬間にプルダウンのデータを送信する方法があれば教えてください。 PHPは現在勉強中の超初心者、javascriptはjQueryなら少々書ける程度です。 よろしくお願いいたします。
- ベストアンサー
- PHP
- JavaScriptからPHPに配列を渡すやり方
JavaScriptからPHPに配列を渡すやり方を教えてください。 やりたい事は、A.HTMLのJavaScriptで動的に作成された配列をB.PHPにPOSTで渡して、B.PHPに遷移したいと思っています。Ajax、JSONなどのキーワードで検索するとそれらしい回答はあるのですが、B.PHPに遷移したいので、Ajaxでもないような気がして、やりたい事にマッチする回答がありませんでした。配列列をHiddenで渡すしかないのでしょうか。もう少しスマートのやり方がないでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- プルダウンリストの選択と同時に更新
よろしくお願いします。 今、ASPとaccessデータベースによるWEBシステムを作成しています。 プルダウンが２つある（ＡとＢとする）として、 Ａである項目を選択すると、 それに伴いＢで選べる項目が決まるようにしたいとおもっています。 Ａのプルダウンから選んで、ボタンを押すようにすればできるのですが、ボタンでなく値を選んだ時点でＢを決めるようにするにはどうすればよいでしょうか？ ご教授お願い致します。
- ベストアンサー
- Microsoft ASP
- 【JavaScript】プルダウンで数字を選択後、即時計算したいですが
【JavaScript】プルダウンで数字を選択後、即時計算したいですが 方法がわかりません。 http://bunjin.com/java/calc.html 以上のサンプルページでは、チェックボックスを押した直後、 下部のテキストボックスに金額が表示されるように設定されていますが、 チェックボックスの横などにプルダウンで数字を表示させて、 その数字の積を合計金額に表示させたいのです。 例） 「ラーメン（５００円）」のチェックボックスにチェック（合計金額には「500 円」と表示） ↓ その「ラーメン（５００円）」の横にプルダウンボックスを選択(値は1,2,3,・・・) ↓ 選択した値により、合計金額を変化させたい(プルダウンで1を選べば500円、2を選べば1000円、・・・) どうかよろしくお願いします。
- ベストアンサー
- JavaScript
お礼
かなり詳しく書いていただき、ありがとうございます。 ajaxは今習得できるほどの時間がないので、参考までにさせていただきます。 その他のケースも詳しく書いていただいたので、助かります。 本当にありがとうございました。