Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript

Html - How To Display & Direct Selected Values From Drop Down Menu To A New Html Page

Post a Comment
How can I display/redirect the selected values the drop down lists from a HTML page to a new page? For instance, if I select any value from the drop down list and when I click on t

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 :

  • WAMp for Window
  • MAMP for Mac
  • XAMP for Linux (also available on Window and Mac.

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"