Get select value in the same page

Question

I have this select button:

<form method="post">
    <label>
        <select id="label" name="challengeX" style="margin-top:150px;">
            <option selected value="0"> Global Statistics </option>
            <option value="1">Challenge 1</option>
            <option value="2">Challenge 2</option>
            <option value="3">Challenge 3</option>
        </select>
    </label>
</form>

In the same page, few lines bellow, I have:

<div id="challenge">
    <?php
        $Ch = $_POST['challengeX']; 
        echo "Challenge: ".$Ch;

        showSomething($Ch,1,1);
    ?>
</div>

But when I change the option, it didn't change the post value.

Answer 1

$Ch = $_POST['challengeX'];

won't get value until you submit the form. Add a submit button to your form.

<form method="post" action="">
    <label>
        <select id="label" name="challengeX" style="margin-top:150px;">
            <option selected value="0"> Global Statistics </option>
            <option value="1">Challenge 1</option>
            <option value="2">Challenge 2</option>
            <option value="3">Challenge 3</option>
        </select>
    </label>
    <input type="submit" value="Submit">
</form>

And access the form values in the same page only if the form is submitted.

<div id="challenge">
    <?php
        if(isset($_POST))    // checks whether any value is posted
        {
          $Ch = $_POST['challengeX']; 
          echo "Challenge: ".$Ch;
          showSomething($Ch,1,1);
        }
    ?>
</div>

Answer 2

you need to submit form on change of dropdown.

Change html like this:

<form method="post">
    <label>
        <select id="label" name="challengeX" style="margin-top:150px;" onchange="this.form.submit()">
            <option selected value="0"> Global Statistics </option>
            <option value="1">Challenge 1</option>
            <option value="2">Challenge 2</option>
            <option value="3">Challenge 3</option>
        </select>
    </label>
</form>

for your php execution you can try like this:

<div id="challenge">
    <?php
if($_SERVER['REQUEST_METHOD'] == 'POST') {


        $Ch = $_POST['challengeX']; 
        echo "Challenge: ".$Ch;

        showSomething($Ch,1,1);

       function  showSomething($Ch,1,1){

         //do your stuff
       }
 }
    ?>
</div>

Answer 3

PHP runs on the server and delivers HTML (or other data) to the browser.

If you want to process the form data with PHP then you must include it in a new HTTP request (typically by submitting the form) and have PHP generate a new page using that data.

Alternatively, if you want to process the data on the client then you will need to use a programming language that is supported in the browser. Unless you want to start using plugins (or browser specific technologies), that limits you to JavaScript. You can bind a change event listener to the select element and then manipulate the DOM with the results.

Answer 4

In the way you can use Javascript. If you dont want to use any server like PHP or something

<form method="post">
  <label>
    <select id="label" name="challengeX" style="margin-top:150px;">
        <option selected value="0"> Global Statistics </option>
        <option value="1">Challenge 1</option>
        <option value="2">Challenge 2</option>
        <option value="3">Challenge 3</option>
    </select>
    <input type="submit" /> /* add this line */
 </label>
</form>

By Javascript

  <select id="label" name="challengeX" style="margin-top:150px;" onChange="getSelect(this)">
    <option selected value="0"> Global Statistics </option>
    <option value="1">Challenge 1</option>
    <option value="2">Challenge 2</option>
    <option value="3">Challenge 3</option>
  </select>
  <div id="resultSelect"></div>
  <script>
    function getSelect(thisValue){
        document.getElementById('resultSelect').innerHTML=thisValue.options[thisValue.selectedIndex].text;
    }
  </script>