Conditioning JavaScript switch with $_POST[]

Question

So first of all, I don't really have any prior Javascript experience, hence why I'm struggeling with something as basic as this. I'm pretty sure there's an answer out there, but due to English not being my first language I can't seem to find it.

I'm working on website where the tariffs of multiple ticket companies are displayed in a table, called from a database. These tariffs change based on the amount of tickets ordered, so I made 5 different price columns, like the following image: Database screenshot

You can select the preferred price column in a form select

<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>

It is my intention that the displayed price column matches the selected dropdown option. So if I select the first option, the first price column is displayed. If I select the second option, the second column is displayed etc.

I tried playing around with a switch like this but didn't really get anywhere;

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;
}

After days of looking through codes I can barely understand, I'm at the end of my rope here. If there's anyone that could help me out here, and possibly even explain it in a way that even I can understand, that'd be great.

Also, I'm aware that this on its own can be done without JavaScript, but it needs to be done in real-time, so through a function.

You're writing PHP code but you're looking for a JavaScript solution? — Halcyon, Apr 21 '17 at 12:53

score 0 · Answer 1 · answered Apr 21 '17 at 13:12

You can make an ajax call from your HTML page to get data from table like this: In HTML, you need to edit onchange event for the dropdown so that it gets you data every time the selected value is changed:

<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>

In getTableData.php, just return result like this:

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

Best practice these days is to omit the closing PHP tag: `?>` — random_user_name, Apr 21 '17 at 13:53
http://stackoverflow.com/questions/4410704/why-would-one-omit-the-close-tag — random_user_name, Apr 21 '17 at 21:51

VikingCode · Answer 2 · 2017-04-21T14:07:25.583

There are multiple way's to achieve what you intend.

Async call
With async request, you will call you're back-end (php) after the page was loaded and user selected the amount of tickets.

For this you have to have 2 routes, one for serving the page and the second that will handle async call and respond with price only (usually in json format)

ex.:
- www.expl.com/tickets => will respond with html page
- www.expl.com/api/tickets => will respond with price for x tickets (x has to be passed with request as GET or 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
    });
})

Google ajax request (not the dutch football team), or read JQuery docs

Put all the prices in to your html
If you work with small set of data, that will not delay your response, you can put the prices directly in your html (js array) while rendering it with php. example

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 for both examples

<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>

Conditioning JavaScript switch with $_POST[]

2 Answers2