$ _POSTでコンディショニングするJavaScriptスイッチ

Question

まず第一に、以前のJavascriptエクスペリエンスを持っていないので、なぜこれほど基本的なものに苦しんでいるのですか？私は確かにそこに答えがあると確信していますが、私の最初の言語ではないので、私はそれを見つけることができません。

私は複数の航空会社の料金表がデータベースから呼び出されたテーブルに表示されるウェブサイトに取り組んでいます。これらの関税は、注文したチケットの量に基づいて変化したので、私は5つの異なる価格列を作った、以下の画像のように： Database screenshot

フォーム中の好ましい価格の列を選択することができます

<select id="aantal_tickets" name="aantal_tickets"> 
    <option value="1" selected="selected">0 - 100</option> 
    <option value="2">101 - 500</option> 
    <option value="3">501 - 1000</option> 
    <option value="4">1001 - 10000</option> 
    <option value="5">> 10000</option> 
</select> 

を選択することがあります表示された価格列が選択されたドロップダウンオプションと一致することを私は意図しています。したがって、最初のオプションを選択すると、最初の価格列が表示されます。 2番目のオプションを選択すると、2番目の列が表示されます。

私はこのようなスイッチで遊んだりしようとしましたが、実際にはどこにも行きませんでした。

switch($_POST['aantal_tickets']) { 
    case "1": 
    $abc = option1; 
    break; 

    case "2": 
    $abc = option2; 
    break; 

    case "1": 
    $abc = option3; 
    break; 

    case "1": 
    $abc = option4; 
    break; 

    case "1": 
    $abc = option5; 
    break; 
} 

コードを見ている日の後、私はほとんど理解できません。ここで私のロープの最後です。ここで私を助けてくれる人がいれば、私が理解できる方法で説明しても大丈夫だろう。

また、JavaScriptを使用せずにこれを単独で実行できることを認識していますが、関数を使用してリアルタイムで実行する必要があります。

Answer 1

あなたはこのようなテーブルからデータを取得するために、あなたのHTMLページからAJAX呼び出しすることができます：HTMLで を、あなたはそれはあなたの選択した値が変更されるたびにデータを取得するように、ドロップダウンのためのonchangeイベントを編集する必要があります。

getTableData.phpで

<select id="aantal_tickets" name="aantal_tickets" onchange="getData(this.value)"> 
     <option value="1" selected="selected">0 - 100</option> 
     <option value="2">101 - 500</option> 
     <option value="3">501 - 1000</option> 
     <option value="4">1001 - 10000</option> 
     <option value="5">> 10000</option> 
    </select> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script> 
    function getData(val) 
    { 
      $.ajax({ 
       url: "getTableData.php?tcktid="+val, 
       cache: false, 
       success: function(data){ 
       alert(data); //You can use it your own way 
       } 
      }); 
    } 
     </script> 

、ちょうどこのような結果を返す：

<?php 
//Your connection code. 
//Your select query to populate values of option1,option2....option5 (as you said) 
switch($_GET['tcktid']) { 
    case "1": 
    $abc = option1; 
    break; 

    case "2": 
    $abc = option2; 
    break; 

    case "1": 
    $abc = option3; 
    break; 

    case "1": 
    $abc = option4; 
    break; 

    case "1": 
    $abc = option5; 
    break; 
} 
echo $abc; 
?> 

Answer 2

あなたが意図し何を達成するための複数の方法のがあります。

非同期リクエストで
非同期呼び出し、あなたは、ページがロードされ、ユーザーはチケットの量を選択した後、バックエンド（PHP）をしている呼び出します。

あなたは（通常はJSON形式で）

例：
2路線、ページを提供するための1および非同期呼び出しを処理し、価格だけで応答しますその二を持っている必要があり、このために

- www.explを.com/tickets => htmlページ
- www.explで応答します。COM/API /チケット=> Xチケットの価格で応答します（xはGETやPOST VARよう要求して渡す必要があり

$('select').on('change', function() { 
    $.ajax({ 
     method: "POST", 
     url: "some.php", 
     data: { 
     category: this.value 
     } 
    }) 
    .done(function(msg) { 
     $('#prijs').html(msg.price); // msg is your json object returned from back-end 
    }); 
}) 

グーグルajax request（ないオランダのサッカーチーム）、またはJQuery docs

を読みますあなたはあなたの応答を遅らせないであろうデータの小さなセット、で作業する場合、PHPでそれをレンダリングしながら、あなたは、HTML（JS配列）で直接価格を置くことができる

は、あなたのHTMLにして、すべての価格を入れてください。 example

0123両方の例について

var prijzen = [5,4,3,2,1]; // part to be filed with php while rendering html 

$('select').on('change', function() { // yes, i'm using JQuery 
    $('#prijs').html(prijzen[this.value - 1]); // -1 because an array starts with 0 
}) 

---

HTML

<select id="aantal_tickets" name="aantal_tickets"> 
    <option value="1" selected="selected">0 - 100</option> 
    <option value="2">101 - 500</option> 
    <option value="3">501 - 1000</option> 
    <option value="4">1001 - 10000</option> 
    <option value="5">> 10000</option> 
</select> 

<div id="prijs"> 
    // placeholder for price 
</div>