Reputation: 59
I'm having a lot of trouble. I feel like what I'm trying to do should be dead-simple, yet I cannot figure out what the heck to do.
What I am trying to do is grab whatever value is selected and submitted in my form, and based on that value, show/hide certain tables on the current web page.
<form id="position" method="get">
<p>Choose your position: </p>
<select id="position-select" name="positions">
<option value="utg">UTG</option>
<option value="utg1">UTG +1</option>
<option value="utg2">UTG +2</option>
<option value="lojack">Lowjack</option>
<option value="hijack">Hijack</option>
<option value="cutoff">Cutoff</option>
<option value="button">Button</option>
<option value="sb">Small Blind</option>
</select>
<button type="submit">Submit</button>
</form>
I am trying to understand how I can, upon the user selecting one of the dropdown values and then pressing "submit", how can I grab whichever selection they chose and like save it to a variable or something so that I can then show/hide these tables on the page.
I keep reading about the post and get method and like communicating with a server, but I don't even want to do that. I want to basically change the UI of the current web page based on whichever selection they select and submit.
If I can save that value to a variable then I can run something like if (their selected value === xy or z) then show xy or z table and hide the rest of the tables.
Does this make sense? Can anybody help?
Upvotes: 0
Views: 1359
Reputation: 194
if you're trying to use JS to trigger the change i think there's a similar questioned that has been answered:
How to get the value of a selected option and save it into a variable? (Javascript)
basically, i think you will need to trigger an onChange value for it.
Upvotes: 1