0

I have a form with where there's two different select tags but has the same object name. These select tags are hidden and is shown only dependent on certain values from another select tag.

<%= f.select :gender, gender %> <!-- gender has Men and Women values -->

<div id="womens" style="display:none;">
  <%= f.select :service, women %>
</div>

<div id="mens" style="display:none;">
  <%= f.select :service, men %>
</div>

So there are different services in each women and men select. This is my jQuery

jQuery ->
  $("#gender").change ->
    genderValue = $("#gender option:selected").attr("value")
    if genderValue == "Women"
      $("#womens").show()
      $("#mens").hide()
    else if genderValue == "Men"
      $("#mens").show()
      $("#womens").hide()
    else
      $("#womens").hide()
      $("#mens").hide()

I've noticed that when I choose a value for mens to show up, it will only save anything that is still in the womens select tag. How do I make it so when its hidden, its really hidden and my submit form won't want to get values from the true hidden fields.

Thanks

hellomello
  • 8,219
  • 39
  • 151
  • 297

2 Answers2

3

Try to disable the form element:

$("#mens select").prop('disabled', true);
Stefan
  • 109,145
  • 14
  • 143
  • 218
2

The problem you've got is display: none literally just hides the element

JS doesn't care about what things look like; it just takes the DOM with the elements loaded on screen. I would personally use Ajax to make this flexible & secure, but as Stefan has already recommended, disabling the element will work

Disabled form inputs do not appear in the request

Community
  • 1
  • 1
Richard Peck
  • 76,116
  • 9
  • 93
  • 147