How to get selected option value in PHP WordPress Shortcode-CodePudding

I am trying to display a list of countries in a select dropdown, when a specific country is selected from that list it should display what colours are available for that country.

You can see I have stored all of this data in a PHP array.

Here is my code in my functions.php file in the child theme of my WordPress website (I have this saved to a shortcode so I can display it on multiple pages if needed):

function availability_shortcode() {

    $countries = [
        ['south-korea', 'South Korea', 'Red, Blue, Orange'],
        ['japan', 'Japan', 'Blue, Orange, Pink'],
        ['norway', 'Norway', 'Red, Blue, Green'],
        ['hong-kong', 'Hong Kong', 'Red, Blue, Orange, Pink'],
        ['united-states', 'United States', 'Red, Blue, Orange, Pink'],
        ['taiwan', 'Taiwan', 'Blue, Orange, Pink, Green'],
        ['netherlands', 'Netherlands', 'Red, Blue, Orange'],
        ['hungary', 'Hungary', 'Red, Blue, Orange, Pink'],
        ['sweden', 'Sweden', 'Blue, Orange, Green'],
        ['india', 'India', 'Red, Blue, Orange, Pink'],
        ['czech-republic', 'Czech Republic', 'Red, Blue, Orange'],
        ['belgium', 'Belguim', 'Red, Orange, Pink'],
    ];

//$form_start = '<form method="post" action="availability.php">';
$select_start = '<select name="availability" id="availability">';

    foreach ($countries as $country) {
        $countries .= '<option value="' . $country[0] . '">' . $country[1] . '</option>';
    }

$select_end = '</select>';
//$form_end = '</form>';

foreach ($avail_countries as $avail_country) {
    if($_POST['availability'] == $country[0]) : 
        $result = $country[2]; 
    endif;
}

$test = $_POST['availability'];
$testOutput = print_r($test);

return $select_start . $countries . $select_end . $result . $test . $testOutput;

}
add_shortcode('availability_calculator', 'availability_shortcode');

The select dropdown displays correctly with all the list of countries, but I can't seem to output the colours based on that selection.

So you can see I have tried to obtain it using $_POST I'm not sure if my select dropdown needs to be wrapped in a form tag and have a method/action assigned to it to be retrieved or it can be done without?

I also created this PHP template not knowing if it was needed and some code I stole: (page-availability.php)

<?php
   $option = isset($_POST['availability']) ? $_POST['availability'] : false;
   if ($option) {
      echo htmlentities($_POST['availability'], ENT_QUOTES, "UTF-8");
   } else {
     echo "task option is required";
     exit; 
   }
?>

Your help is greatly appreciated.

Thanks

CodePudding user response：

I am assuming the is on the frontend of a page, with no save button, so the only way to output the colors would be to use Javascript, AJAX or jQuery to bind to the onchange event to know when the end user changes the select option.

You can do this like this if you have jQuery installed:

In your functions.php file:

add_shortcode('availability_calculator', 'availability_shortcode');
function availability_shortcode(){
    $countries = [
        ['south-korea', 'South Korea', 'Red, Blue, Orange'],
        ['japan', 'Japan', 'Blue, Orange, Pink'],
        ['norway', 'Norway', 'Red, Blue, Green'],
        ['hong-kong', 'Hong Kong', 'Red, Blue, Orange, Pink'],
        ['united-states', 'United States', 'Red, Blue, Orange, Pink'],
        ['taiwan', 'Taiwan', 'Blue, Orange, Pink, Green'],
        ['netherlands', 'Netherlands', 'Red, Blue, Orange'],
        ['hungary', 'Hungary', 'Red, Blue, Orange, Pink'],
        ['sweden', 'Sweden', 'Blue, Orange, Green'],
        ['india', 'India', 'Red, Blue, Orange, Pink'],
        ['czech-republic', 'Czech Republic', 'Red, Blue, Orange'],
        ['belgium', 'Belguim', 'Red, Orange, Pink'],
    ];
    ?>
    <select name="availability" id="availability">
        <?php
            foreach ($countries as $country) {
                echo '<option data-colors="'.$country[2].'" value="'.$country[0].'">'.$country[1].'</option>';
            }
        ?>
    </select>
    <div id="results">
        <?php echo $countries[0][2]; ?> 
    </div><?php
}

And in a js file: (with jQuery loaded)

$('#availability').on('change',function(e){
    var val = $(this).val(),
        selected = $(this).find('option[value="' val '"]'),
        colors = selected.attr('data-colors');
    $('#results').html(colors);
});

And then just add your shortcode to whatever page you want to display the select field on.