Display PHP variable value onchange of HTML dropdown option - php

Question

I have 3 PHP Variable values with me which i want to display depending on the HTML option selected from the drop down menu without refreshing the page.
<p>
<label for="package" class="formlbl">I want to Enroll In:</label>
<select name="package" id="package">
<option selected="selected" value=""></option>
<option value="full_package">Complete Package</option>
<option value="training">Only Training</option>
<option value="counselling">Only Counselling</option>
</select>
</p>
What i want is when he selects full package it should echo variable no 1, when he selects training it should echo variable no 2 and so on without refreshing the page.
Please tell me what i should do. The values and variable are working in the code.

Answer 1

Since PHP is only a server-side language once the response is sent to the client, php can no longer change anything on the page without a refresh.
You will need to use javascript in order to have content that changes without reloading a new page (also called dynamic content). You can do this really easily with a framework called jquery.
Add jquery to your webpage with this html line:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
and then use this html template for your dropdown:
<!-- make each item in your dropdown an <a> with an ID -->
<ul class="dropdown">
<li onclick="toggleResponse('comp')">Complete </li>
<li onclick="toggleResponse('pack')">Package Only </li>
<li onclick="toggleResponse('train')">Training Only </li>
<li onclick="toggleResponse('couns')">Counselling </li>
<ul>
<!-- give every response the same class, and individual IDs -->
<span class="response" id="comp"><?php echo var1 ?></span>
<span class="response" id="pack"><?php echo var2 ?></span>
<span class="response" id="train"><?php echo var3 ?></span>
<span class="response" id="couns"><?php echo var4 ?></span>
<style>
// let all the responses be hidden initially
.response {
display: none;
}
</style>
<script type="text/javascript">
function toggleResponse (id) {
// hide any responses that might be showing
$('.response').hide();
// show the response for this option
$('#' + id).show();
}
</script>

Answer 2

This is probably the quickest and easiest way to do it.
Fiddle example: https://jsfiddle.net/te36zy18/
HTML
<p>
<label for="package" class="formlbl">I want to Enroll In:</label>
<select name="package" id="package">
<option selected="selected" value=""></option>
<option value="full_package">Complete Package</option>
<option value="training">Only Training</option>
<option value="counselling">Only Counselling</option>
</select>
</p>
<div id="full_package" class="package"><?php echo full_package;?></div>
<div id="training" class="package"><?php echo training;?></div>
<div id="counselling" class="package"><?php echo counselling;?></div>
jQuery
$("#package").on("change", function(){
var package = $(this).val();
$(".package").hide()
$("#" + package).show();
});
CSS
.package {display: none'}