HTML - How To Display & Direct Selected Values From Drop Down Menu To A New HTML Page
Solution 1:
The Explanation
The simplest way according to me is to use a form and PHP code to fill the other page. In order to pass data from one page to another you used a form. But you need to put your selects into the form.
And then, in order to display the data in the second page you need some PHP code. So You need to rename your newPage.html to newPage.php.
Run PHP
Then of course to run the PHP you will need a server. If you don't have any, I recommend you install either one of them :
The code
<!DOCTYPE html>
<html>
<body>
<div align="center">
<center>
<h4 style="color:darkblue">Choose Your Food/Beverage & Status : </h3>
</center>
<form method="get" action="newPage.php">
<div>
<label for='foodbeverage'>Choose a Food/Beverage : </label>
<select ID="foodbeverage" name='foodbeverage[]'>
<optgroup label="DEFAULT">
<option value="NONE">NONE</option>
</optgroup>
<optgroup label="Food">
<option value="chickenchop">Chicken Chop</option>
<option value="pasta">Pasta</option>
<option value="pizza">Pizza</option>
<option value="chocolate">Chocolate Cake</option>
<option value="redvelvet">Red Velvet Cake</option>
<option value="icecream">Ice Cream Cake</option>
</optgroup>
<optgroup label="Beverages">
<option value="milk">Milk</option>
<option value="freshjuice">Fresh Juice</option>
<option value="icecream">Ice Cream</option>
<option value="coffee">Coffee</option>
<option value="carbonated">Carbonated Can Drink</option>
<option value="water">Water</option>
</optgroup>
</select>
<label for='status'>
Dine In or Take Away :
</label>
<select ID="status" name='status[]'>
<optgroup label="DEFAULT">
<option value="NONE">NONE</option>
</optgroup>
<optgroup label="STATUS">
<option value="dinein">Dine In</option>
<option value="takeaway">Take Away</option>
</optgroup>
</select>
</div>
<br/>
<div>
<label for='foodbeverage2'>Choose a Food/Beverage : </label>
<select ID="foodbeverage2" name='foodbeverage[]'>
<optgroup label="DEFAULT">
<option value="NONE">NONE</option>
</optgroup>
<optgroup label="Food">
<option value="chickenchop">Chicken Chop</option>
<option value="pasta">Pasta</option>
<option value="pizza">Pizza</option>
<option value="chocolate">Chocolate Cake</option>
<option value="redvelvet">Red Velvet Cake</option>
<option value="icecream">Ice Cream Cake</option>
</optgroup>
<optgroup label="Beverages">
<option value="milk">Milk</option>
<option value="freshjuice">Fresh Juice</option>
<option value="icecream">Ice Cream</option>
<option value="coffee">Coffee</option>
<option value="carbonated">Carbonated Can Drink</option>
<option value="water">Water</option>
</optgroup>
</select>
<label for='status2'>
Dine In or Take Away :
</label>
<select ID="status2" name="status[]">
<optgroup label="DEFAULT">
<option value="NONE">NONE</option>
</optgroup>
<optgroup label="STATUS">
<option value="dinein">Dine In</option>
<option value="takeaway">Take Away</option>
</optgroup>
</select>
</div>
<br/>
<input type="submit" value=" GO "/>
</form>
</div>
</body>
</html>And there is your newPage.php file.
<!DOCTYPE html>
<html>
<body>
<div align="center">
<?
for ($i = 0; $i < sizeof($_GET['foodbeverage']); $i++) {
echo '<span style="font-size: medium; "><B>Food/Beverage Selected : '
. $_GET['foodbeverage'][$i]
. '</B></span>'
. '<br/><br/>'
. '<span style="font-size: medium; "><B>Dine In/Take Away : '
. $_GET['status'][$i]
. '></B></span><br/><br/>';
}
?>
</div>
</body>
</html>
Hope that helps.
EDIT :
Of course, you are not force to use PHP for the server side. If you are using some other language it's ok too.
Solution 2:
Try code below: Give different IDs to different dropdowns. I am writing code for two dropdowns
<input type="submit" id="btngo" value="Go" />
<script type="text/javascript">
$(function () {
$("#btngo").bind("click", function () {
var url = "Page2.htm?foodbeverage=" + encodeURIComponent($("#foodbeverage").val()) + "&status=" + encodeURIComponent($("#status").val());
window.location.href = url;
});
});
</script>
In Second Page: give ID to div say showdata: <div id="showdata" align="center">
<script type="text/javascript">
var queryString = new Array();
$(function () {
if (queryString["foodbeverage"] != null && queryString["status"] != null) {
var data = "<b>Food Beverages:</b> " + queryString["foodbeverage"] + " <b>Dine Takeaway:</b> " + queryString["status"];
$("#showdata").html(data);
}
});
</script>
You can vist this for more information There are four different ways to do this.
If you don't wanna use jquery then try using localStorage:
localStorage["key"] = value;
... in another page ...
value = localStorage["key"];
visit this page. It has solution for javascript only.
Hope it will help you..!!
Post a Comment for "HTML - How To Display & Direct Selected Values From Drop Down Menu To A New HTML Page"