0

I have a relatively simple need. I have an html form that contains a dynamic drop down that I built by using JS. When the first select is changed, a second (dependent) select appears. For example, the first select includes options for Ford, Toyota, and Honda. If the user selects "Ford" then another dropdown appears and allows the user to choose a model made by Ford (i.e. F150, Ranger, Fusion, etc...). I am using hidden <span> elements to show/hide the dependent drop downs, but the select name for all of the secondary drop downs is the same.

The issue is that when I submit my form, I get all three "make" variables passed through my $_GET method. I have included an example for clarity:

<span class="Ford">
    <select name="make">
        <option>F150</option>
        <option>Ranger</option>
        <option>Fusion</option>
    </select>
</span>
<span class="Toyota">
    <select name="make">
        <option>Prius</option>
        <option>Tacoma</option>
    </select>
</span>
<span class="Honda">
    <select name="make">
        <option>Civic</option>
        <option>Accord</option>
    </select>
</span>

The JS function just shows/hides the various spans as appropriate... All I want to do is pass the variable in the span that is currently showing on the page. Any ideas would be great!

luiges90
  • 4,493
  • 2
  • 28
  • 43
user2492064
  • 591
  • 1
  • 8
  • 21

1 Answers1

1

You can add disabled="disabled" attribute to each hidden field, that way you will prevent them from being sent to the server.

The idea is taken from the following Answer

Community
  • 1
  • 1
Shahar Galukman
  • 882
  • 3
  • 15
  • 35