im relatively new to ROR, and would like some help with the following code.

Question

0

Asked: May 24, 20262026-05-24T12:55:18+00:00 2026-05-24T12:55:18+00:00

im relatively new to ROR, and would like some help with the following code.

0

im relatively new to ROR, and would like some help with the following code.

I would like to show a div (it’s called demographics) when a specific selection (“Customers”) is made form a dropdown. If an option other than “Customers” is selected from the dropdown, I would like that the demographicsv div remain hidden.

At present, my code is partially working. It shows and hides the div; however, when I save the page and come back to it, the div is hidden, even if “Customers” is selected in the dropdown. This might be because the default setting is: display:none.

Is there a way to make sure that the field is displayed on page load when the proper selection has been made?? And I suppose a way to make the opposite true too–> a div with display:block; remains hidden if the field from the dropdown does not match the required field.

Any help would be extremely appreciated. Thank you and I sincerely appreciate your time:

my code (HAML):

= f.select :who, WHO, {}, :onChange => "showDemographics(this)", :prompt => true

#demographics{:style => "display:none;"}
  %p.information
    please fill out the following demographics.
  %div{:class => "label_leftalign field"}
    = f.label :age, "Age"
    = f.select :age, AGES, :prompt => true
  %div{:class => "label_leftalign field"}
    = f.label :race, 
    = f.select :race, RACES, :prompt => true

Javascript

  function showDemographics(obj)
  {
    if(obj[obj.selectedIndex].value == 'Customer')
    {
        document.getElementById('demographics').style.display = 'block';
    }
    else
    {
        document.getElementById('demographics').style.display = 'none';
    }
  }

EDIT::
OK, So the key issue is that on page reload a div remains hidden even if the correct value is in the dropdown box. I suppose that this can be solved by one of two ways 1. running some sort of validation on everytime the page is loaded or 2. cookies.

Unfortunately, I’m not very well versed in Javascript or jQuery… and I’ve never implemented cookies on a site, and would prefer to avoid using them if possible.

Could anyone help me write a script that validates the presence of Customer in the dropdown and shows/hides a div accordingly? Thank you, and thanks to Carlos Pardilla and M. Cypher for their help thus far.