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

Question

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 the 'GO' button, the page will be directed to a new page with the selected value being displayed. Need help on this one.

<!DOCTYPE html>
<html>

<body>
  <div align="center">

    <center>
      <h4 style="color:darkblue">Choose Your Food/Beverage & Status : </h3>
    </center>

    <table>
      <tr>
        <td>

          <font size=2>
            <B>Choose a Food/Beverage : </B>
          </font>

          <select ID="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>
          <br/>

          <font size=2>
            <B>Choose a Food/Beverage : </B>
          </font>

          <select ID="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>
          <br/>

        </td>

        <td>
          <font size=2>
            <B>Dine In or Take Away : </B>
          </font>
          <select ID="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>
          <br/>

          <font size=2>
            <B>Dine In or Take Away : </B>
          </font>
          <select ID="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>
          <br/>

        </td>
      </tr>
    </table>

    <br/>
    <form method="get" action="newPage.html">
      <input type="submit" value="    GO    " />
    </form>
    <br/>

</body>

</html>

In this page, I want the values to be displayed/redirected accordingly.

<!DOCTYPE html>
<html>

<body>
  <div align="center">

    <font size=4>
      <B>Food/Beverage Selected : </B>
    </font>

    <br/>
    <br/>

    <font size=4>
      <B>Dine In/Take Away : </B>
    </font>

    <br/>
    <br/>

</body>

</html>

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

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>
<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.

Preet · Answer 2 · 2017-08-25T03:11:58.360

-1

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..!!

edited Aug 25 '17 at 03:11

answered Aug 25 '17 at 02:31

Preet

984
2
14
34

The first page fails to redirect to the second one :( – cerberus99 Aug 25 '17 at 03:01
It should work. Plz check your code. Plz See my updated answer. I think you need jquery library for this. Thanks – Preet Aug 25 '17 at 03:03
If you don't wanna use jquery then it has solution for that i am not sure if its working. see my updated answer – Preet Aug 25 '17 at 03:14
1

Thank you so so much. I'm using notepad++ as my developing tool and I'm really new to jquery. Will try to follow as what you say. – cerberus99 Aug 25 '17 at 03:19
The problem with the local storage is that not all browsers are compatible. So I do not advise to use this solution, because with older browsers your site will just not work. – Alexandre Thyvador Aug 25 '17 at 11:36
I have suggested many solutions to solve the problem not only the localStorage one. Anyway thanks for letting us know – Preet Aug 25 '17 at 14:38

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

2 Answers2

The Explanation

The code

Linked