How to get value of select option an used in php variable? - php

Question

I'm trying to take the value of SELECT option and use it in php variable, but can not figure out how. Would you assist me. Thank you.
Here is my code:
<select name="pcs" id="pcs">
<option class="option" value="8" selected class="selected">8</option>
<option value="12">12</option>
<option value="16">16</option>
<option value="20">20</option>
<option value="24">24</option>
<option value="24+">над 24</option>
</select></br>
My goal is, after taking the value to make some calculation with it and show results. Thank you for the help.
This is one option:
<select name="pcs" id="pcs" onchange="this.form.submit()">
<option class="option" value="8" selected">8</option>
<option value="12" <?php if($pcs =="12") { echo "selected"; } ?>>12</option>
<option value="16" <?php if($pcs =="16") { echo "selected"; } ?>>16</option>
<option value="20" <?php if($pcs =="20") { echo "selected"; } ?>>20</option>
<option value="24" <?php if($pcs =="24") { echo "selected"; } ?>>24</option>
<option value="24+" <?php if($pcs =="24+") { echo "selected"; } ?>>над 24</option>
</select></br>
But I do not want the page to reload.

Answer 1

Using jQuery get the select box value on change or submit, pass the value to a php file via Ajax say calculation.php, Do the necessary calculation and echo the result in calculation.php. Get the value and display inside DIV or desired place.
EXAMPLE BELOW:
main_file.php
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#pcs").on('change', function(){
var pcs_val = $(this).val();
$.ajax({
type: "POST",
url: "calculation.php",
data: { pcs: pcs_val},
success: function(theResponse) {
$('#outputDiv').html(theResponse);
}
});
});
});
</script>
<select name="pcs" id="pcs">
<option class="option" value="8" selected class="selected">8</option>
<option value="12">12</option>
<option value="16">16</option>
<option value="20">20</option>
<option value="24">24</option>
<option value="24+">над 24</option>
</select></br>
<div id="outputDiv">--output here--</div>
calculation.php
<?php
$pcs = isset($_POST['pcs']) ? $_POST['pcs'] : '';
echo 'Calculation Result = '.$pcs;
?>

Answer 2

Try the following without using AJAX:
<?php
$pcs_array = array('8'=>'8','12'=>'12','16'=>'16','20'=>'20','24'=>'24','24+'=>'над 24');
$select_pcs = '';
if(isset($_POST['pcs']) && !empty(isset($_POST['pcs']))){
$select_pcs = $_POST['pcs'];
}
if(!empty($pcs_array)){
?>
<select name="pcs" id="pcs">
<?php
$option_count = 0;
foreach($pcs_array as $k=>$v){
if(!empty($select_pcs) && $select_pcs == $k){
echo '<option class="option" value="'.$k.'" selected class="selected">'.$v.'</option>';
}elseif($option_count == 0 && empty($select_pcs)){
echo '<option class="option" value="'.$k.'" selected class="selected">'.$v.'</option>';
}else{
echo '<option value="'.$k.'">'.$v.'</option>';
}
$option_count++;
}
?>
</select></br>
<?php
}
?>