Get select value in the same page - php

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>