0

I'm a beginner in web app development and wanted to make a dropdown list with groups where when you click on an item it directs you to another page (see the line with customRecipes.html). So here's what I got so far:

<label for="categories" class="label">Categories</label>
<select name="categories" style="margin-right: 10px;" onchange="location = this.value;">
    <optgroup label="Starters" id="starters">
        <option>will be filled later</option>
    <option>will be filled later</option>
</optgroup>
<optgroup label="Main Dishes" id="mainDishes">
    <option>will be filled later</option>
    <option>will be filled later</option>
</optgroup>
<optgroup label="Desserts" id="desserts">
    <option label="custom" value="../Recipes/customRecipes.html">ThisRecipe</option>
        <option>will be filled later</option>
</optgroup>
</select>

I got what I wanted but now I want to be able to pass information to the directed page. For example, when ThisRecipe option is selected I want to know its label in the directed page (../Recipes/customRecipes.html). Is this possible?

Hrodrsvitnir In Chains
  • 13
  • 3
  • Just use a standard `
    `, and submit it (the target URL goes inside the `action` attribute). That will put all its values in the URL, and you can read them on the next page. (Assuming you aren't using a proper backend like PHP)
     – ChrisG Dec 13 '20 at 10:04
  • Ok so I changed the code a lot and when I did as you said I got this on the directed page: **?recipes=nice+job**. My question now is how can I extract that _"nice job"_ from the `window.location.search` @ChrisG – Hrodrsvitnir In Chains Dec 13 '20 at 10:11
  • That is a separate question that also has tons of existing answers. Please do some research on your own first. Google something like "js get params". First result is a dupe of https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript – ChrisG Dec 13 '20 at 10:22

0 Answers0