Is there something in PHP to load the page depending on the selected value?

+2 Altaf Husain Neva · February 7, 2015
There are some features in ASP.NET to change the values of some controls when the value is selected from the previous controls. Like on selecting country in dropdown list the next control of state loads automatically respective values of that selected country. So I have heard that I have to use ajax or something like that.??

What is the easiest way to do it ?

Post a Reply

Replies

Oldest  Newest  Rating
+1 Calvin Sienatra · February 7, 2015
The most easiest way is to use JQuery.


<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<form>
<select id="selectPage">
<option>SELECT COUNTRY</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
</select>
</form>

<div id="us" class="country" style="display:none;">UNITED STATES!! <img src="us.jpg"/></div>
<div id="uk" class="country" style="display:none;">UNITED KINGDOM!! <img src="uk.jpg"/></div>

<script type="text/javascript">
$(function() {
$('#selectPage').change(function(){
$('.country').hide();
$('#' + $(this).val()).show();
});
});
</script>
</html>




This is the most simplest way to do it, or somebody down below will show some kind of God code that is more simple than this.
By the way you can also use AJAX if you'd like, but it is going to be much more complex.
+1 Altaf Husain Neva · February 7, 2015
Will jquery send request to server and bring the desired data from server? Will it require to load the whole page.??
+1 Calvin Sienatra · February 8, 2015
I guess the desired data from the server is either a text/page or from a database and yes it will bring the desired data from the server by doing so:

<html>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script type="text/javascript">
$(document).ready(function() {
$('#selectCountry').change(function() {
var a = $( "#selectCountry" ).val();
$("#showdata").html("");
if(a == "us"){
$.ajax({
type: "GET",
url: "showus.php",             
dataType: "html",               
success: function(response){   
$("#showdata").html(response); 
alert(response);
}
});
}else if(a == "uk"){
$.ajax({
type: "GET",
url: "showuk.php",             
dataType: "html",               
success: function(response){
$("#showdata").html(response); 
alert(response);
}
});
}

});
});
 </script>

<body>
<h3 align="center">Choose a country</h3>
<select id="selectCountry">
<option>-</option>
<option value="us">UNITED STATES</option>
<option value="uk">UNITED KINGDOM</option>
</select>
<div id="showdata" align="center"/>
</body>
</html>



You just need to change the showus.php and the showuk.php page into your desired need! Either you would like to add a mysql database connection or some sort of text. It will also not reload the whole page because it is ajax and that is what ajax do!
+1 Altaf Husain Neva · February 9, 2015
Wow! Great HELP. Thanks a lot.
  • 1

PHP

107,288 followers
About

Server-side, HTML embedded scripting language used to create dynamic Web pages.

Links
Moderators