0

I'm roughly new in PHP and I'm trying to display the contents of a multidimensional array in a table that was inside a select option list which has been selected by the user. What I'm trying to do is that the array key of the selected option is returned into a new variable such as $keyref = key($myarray); so that I can use the key to display inside the table but i don't know how. Do I use a javascript function such as onChange=function() in the <select> list?

Here is the code:

<?php
$tshirt = array (
  array("T-shirt A",15,"XS"),
  array("T-shirt B",20,"S"),
  array("T-shirt C",25,"M")
  ); //array("t-shirt type", price, "size")

 $keyRef = 0; //the variable that will contain the selected array key
 echo "<select id='shirtlist'>";
 foreach($tshirt as $value){
   echo "<option value='$value)'>$value[0]</option>";
  }
  echo "</select>";

echo "<p>Details of T-shirt:</p>";
  echo "<table>";
  echo "<tr>";
  echo "<th>T-shirt Type</th>";
  echo "<th>Price</th>";
  echo "<th>Size</th>";
  echo "</tr>";
  echo "<tr>";
  echo "<td>".$tshirt[$keyRef][0]."</td>";
  echo "<td>".$tshirt[$keyRef][1]."</td>";
  echo "<td>".$tshirt[$keyRef][2]."</td>";
  echo "</tr>";
  echo "</table>";
?>

The table manage to display the data of the first array but nothing happens when I selected the other options. As for trying javascript function I tried the json_encode($myarray) method but that only returned the Array as String notice.

Shukri Lukman
  • 3
  • 1
  • What you need here is Javascript and AJAX. PHP can't be executed on the client. It is unaware of the selection changes you make. – El_Vanja Dec 12 '20 at 17:13

2 Answers2

1

First of all, you have to understand that PHP is only executed server-side, which means that there is no interaction between the PHP code and the action you are achieving in the browser.

The only way to return to PHP is to send a new request.

Depending on what you want to do and which workflow you want in the browser you should choose between pure PHP (each action has to be achieved with client-server request) or using javascript (directly executed in the browser).

In pure PHP, your feature can be achieved with the following code :

<?php
$tshirt = array (
  array("T-shirt A",15,"XS"),
  array("T-shirt B",20,"S"),
  array("T-shirt C",25,"M")
  ); //array("t-shirt type", price, "size")

 $keyRef = 0; //the variable that will contain the selected array key
 if(isset($_GET["shortlist"]) && isset($tshirt[$_GET["shirtlist"]])) {
  $keyRef = $_GET["shirtlist"];
 }

 echo "<form method='GET'>";
 echo "<select name='shirtlist'>";
 foreach($tshirt as $key => $value){
   $selected = '';
     if ($key == $keyRef) {
         $selected = 'selected';
     }
   echo "<option value='$key' $selected>".$value[0]."</option>";
  }
  echo "</select>";
  echo "<input type='submit' value='submit'/>";
  echo "</form>";

echo "<p>Details of T-shirt:</p>";
  echo "<table>";
  echo "<tr>";
  echo "<th>T-shirt Type</th>";
  echo "<th>Price</th>";
  echo "<th>Size</th>";
  echo "</tr>";
  echo "<tr>";
  echo "<td>".$tshirt[$keyRef][0]."</td>";
  echo "<td>".$tshirt[$keyRef][1]."</td>";
  echo "<td>".$tshirt[$keyRef][2]."</td>";
  echo "</tr>";
  echo "</table>";
?>

Note that I use the global $_GET to get the information from the URL query strings. This information is transmitted to PHP when the submit button of the form is clicked, and then the value of the select is accessible in it using the name attribute of the tag (<select name="shirtlist"> means the value is accessible in $_GET["shirtlist"] when the method of the form is GET).

This code requires an action from the user to update the page with the selection.

I also added a selected attribute to the select in order to select the displayed article (When the iteration index is the same as the requested shirtlist value).

The double check if(isset($_GET["shortlist"]) && isset($tshirt[$_GET["shirtlist"]])) { is here to be sure the selected item is in the list, as the URL is accessible to anyone it's possible to change manually the value, it's more secure to change the form method to POST and then access the value using the $_POST global array instead of the $_GET one.

LeviathanCalumet
  • 89
  • 6
0

Html Code:

<?php
  $tshirt = array (
    array("T-shirt A",15,"XS"),
    array("T-shirt B",20,"S"),
    array("T-shirt C",25,"M")
  ); //array("t-shirt type", price, "size")
?>

<!-- here we create a select box -->
<select class="" id="shirtlist">
  <option value="" selected>select</option>
  <!-- add the key varible into foreach loop that give the index of the value -->
  <?php foreach($tshirt as $key => $value){ ?>
    <option value="<?=$key?>"><?=$value[0]?></option>";
  <?php } ?>
</select>

<p>Details of T-shirt:</p>
<table>
  <tr>
    <th>T-shirt Type</th>
    <th>Price</th>
    <th>Size</th>
  </tr>
  <tr>
    <!-- Here we are created the empty table Data will be field after user select any option -->
    <td class="type"></td>
    <td class="price"></td>
    <td class="size"></td>
  </tr>
</table>

Add Jquery CDN :

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

Javascript/Jquery Code :

<script type="text/javascript">
/* we we convert the PHP array into Javascript array using JSON.parse function */
var data = JSON.parse('<?=json_encode($tshirt)?>');

/*  This is the code when user change the option in select box then it will add/replace the data into table */
$('#shirtlist').change(function(e){
    var key = $(this).val();
    $('.type').text(data[key][0]);
    $('.price').text(data[key][1]);
    $('.size').text(data[key][2]);
});

this will do the work.

on select box change event, it will add/replace the data into table.

Jayesh Paunikar
  • 148
  • 1
  • 7