プロが教える店舗&オフィスのセキュリティ対策術

【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>';
?>

どうかよろしくお願いします。不明な点は随時補足にて記述させていただきます。

A 回答 (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>
    • good
    • 0
この回答へのお礼

かなり詳しく書いていただき、ありがとうございます。
ajaxは今習得できるほどの時間がないので、参考までにさせていただきます。
その他のケースも詳しく書いていただいたので、助かります。

本当にありがとうございました。

お礼日時:2010/07/14 18:43

例えば・・・)


$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テーブルの定義内容が知れないのでなんともいえませんが、

普通SQLは
 SELECT 列名[,列名,列名,列名....] from テーブル名 [WHERE 列名=’キー値’[AND/OR...]]
じゃないしょっか。([]内は省略可)

何故2回に分けて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() でインジェクション攻撃をブロックする必要が
 あります。(知ってますよね)
    • good
    • 0
この回答へのお礼

様々なご指摘ありがとうございます。
そして完全におかしな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);
でした。ご迷惑をおかけしました。


あまり時間がなかったので例文のコーディングがひっどい事に・・・。
次回からは少し冷静になって質問させていただきます。
これからも何かとお世話になるかと思いますが、よろしくお願いします。
色々と、ありがとうございました。

お礼日時:2010/07/15 10:41

クライアント側でjavascriptの関数check1() が実行される時には、


もうすでにサーバー側のPHPの処理は終わっているはず。

プルダウンで「A店」が選択されたタイミングで、javascript関数を
使って、もう一度リクエストパラメーターをセットし、自分自身をGETなりPOST
なりして、サーバー側でPHPを実行させ、PHP側でリクエストパラメーターを判定して、
$priceに値をセットしなければならないでしょう。
    • good
    • 0
この回答へのお礼

遅くなりましたが、回答ありがとうございます。
そうですか、やはりこの方法では瞬時に(ページ更新などをせずに)値段表示を変えることは難しいみたいですね・・・。

ではもうひとつだけ質問があるのですが、
二つのデータベース接続を行い、選んだプルダウンの内容により、表示を変更させることってできないですか?

例えば・・・)
$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文を記述して、選んだプルダウンの内容により出力する値を変えるということができるでしょうか?
それができれば私が行いたいこともできるのですが・・・。
お礼文なのに質問をしてしまい、申し訳ございませんが、どうかよろしくお願いします。

お礼日時:2010/07/14 10:15

関係ないとは思いますがtextについて訂正します。


'a = document.myform.dealer[document.myform.dealer.selectedIndex].text;
選択肢の番号を取得して、指定しないとtextは取得できません。

valueでやる方が良いですが、optionタグ内に表記が必要です。
    • good
    • 0

基本的な確認ですが、タグはどうなってるでしょうか。



<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」と出現します。
これまでは、一応大丈夫です。
後はその問屋を選択した直後にデータベースから金額を引っ張り出して、
瞬時に金額をテキスト(できるだけテキストボックスでないほうが望ましい)に反映できればいいのですが・・・。

補足日時:2010/07/13 18:24
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!