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><divalign="center"><center><h4style="color:darkblue">Choose Your Food/Beverage & Status : </h3></center><formmethod="get"action="newPage.php"><div><labelfor='foodbeverage'>Choose a Food/Beverage : </label><selectID="foodbeverage"name='foodbeverage[]'><optgrouplabel="DEFAULT"><optionvalue="NONE">NONE</option></optgroup><optgrouplabel="Food"><optionvalue="chickenchop">Chicken Chop</option><optionvalue="pasta">Pasta</option><optionvalue="pizza">Pizza</option><optionvalue="chocolate">Chocolate Cake</option><optionvalue="redvelvet">Red Velvet Cake</option><optionvalue="icecream">Ice Cream Cake</option></optgroup><optgrouplabel="Beverages"><optionvalue="milk">Milk</option><optionvalue="freshjuice">Fresh Juice</option><optionvalue="icecream">Ice Cream</option><optionvalue="coffee">Coffee</option><optionvalue="carbonated">Carbonated Can Drink</option><optionvalue="water">Water</option></optgroup></select><labelfor='status'>
Dine In or Take Away :
</label><selectID="status"name='status[]'><optgrouplabel="DEFAULT"><optionvalue="NONE">NONE</option></optgroup><optgrouplabel="STATUS"><optionvalue="dinein">Dine In</option><optionvalue="takeaway">Take Away</option></optgroup></select></div><br/><div><labelfor='foodbeverage2'>Choose a Food/Beverage : </label><selectID="foodbeverage2"name='foodbeverage[]'><optgrouplabel="DEFAULT"><optionvalue="NONE">NONE</option></optgroup><optgrouplabel="Food"><optionvalue="chickenchop">Chicken Chop</option><optionvalue="pasta">Pasta</option><optionvalue="pizza">Pizza</option><optionvalue="chocolate">Chocolate Cake</option><optionvalue="redvelvet">Red Velvet Cake</option><optionvalue="icecream">Ice Cream Cake</option></optgroup><optgrouplabel="Beverages"><optionvalue="milk">Milk</option><optionvalue="freshjuice">Fresh Juice</option><optionvalue="icecream">Ice Cream</option><optionvalue="coffee">Coffee</option><optionvalue="carbonated">Carbonated Can Drink</option><optionvalue="water">Water</option></optgroup></select><labelfor='status2'>
Dine In or Take Away :
</label><selectID="status2"name="status[]"><optgrouplabel="DEFAULT"><optionvalue="NONE">NONE</option></optgroup><optgrouplabel="STATUS"><optionvalue="dinein">Dine In</option><optionvalue="takeaway">Take Away</option></optgroup></select></div><br/><inputtype="submit"value=" GO "/></form></div></body></html>
And there is your newPage.php file.
<!DOCTYPE html><html><body><divalign="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
<inputtype="submit"id="btngo"value="Go" /><scripttype="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">
<scripttype="text/javascript">var queryString = newArray();
$(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"