Hi everyone,

I’m an occasional JQuery user that doesn’t need to venture past the ‘click a button move or hide/show and element’ often, but I’m currently working on a project that needs to stretch a bit beyond these modest skills.

 I’m setting up some forms in a registration page that will show/hide certain divs depending on the age and the US state of residence of the registrant. For users under adult age, an adult will need to register for them, so an additional section for parents will need to be displayed. For those over adult age that section for parents will hide.

 The thing is that in the US the Age of Majority depends on where the person lives. So while in most states you are considered an adult if you are over the age of 18, if you live in Alabama or Nebraska you are not considered an adult until you turn 19, while in Mississippi under certain conditions, you need to be 21 years old.

 Not being well-versed in the if/then syntax or the use of logic operators in JQuery, I started setting up the code the long way if only just to wrap my head around it, with the intention of paring it down after I got it working, but I got stuck. Here’s what I have (yes, I know it’s ugly):

Html:

<form id="age-range" autocomplete="off">

        <select>

          <option value="" disabled="disabled" selected="selected">--age range--</option>

          <option id="under-13" value="under-13">Under 13 years old</option>

          <option id="13" value="13">13 years old</option>

          <option id="14" value="14">14 years old</option>

          <option id="15" value="15">15 years old</option>

          <option id="16" value="16">16 years old</option>

          <option id="17" value="17">17 years old</option>

          <option id="18" value="18">18 years old</option>

          <option id="19" value="19">19 years old</option>

          <option id="20" value="20">20 years old</option>

          <option id="21-over" value="21-over">21 years old or older</option>

        </select>

      </form>

      <div id="state">

      <p>Where do you live?</p>

        <form autocomplete="off">

        <select>

          <option value="" disabled="disabled" selected="selected">--state--</option>

          <option id="AL" value="AL">Alabama</option>

          <option id="AK" value="AK">Alaska</option>

          <option id="AZ" value="AZ">Arizona</option>

          <option id="AR" value="AR">Arkansas</option>

          …

            </select>

        </form>

      </div>

The Jquery:

This displays a message alerting the user that because they’re under 13, they cannot participate.

$('#under-13').click(function(){

          $('#under-13-notice').show();

          $('#state').hide();

      });

For those under 18:

      $('#13, #14, #15, #16, #17').click(function (){

          $('#parent-form').show();

          $('#state').show();

      });

      $('#18' && ('#NE, #AL')).click(function (){

          $('#parent-form).show();

          $('#state').show();

      });

      $(('#19, #20') && '#MS').click(function (){

          $('#parent-form).show();

          $('#state').show();

      });

      $('#21').click(function (){

          $('#parent-form).hide();

          $('#state').show();

      });

That’s all I have that works and without showing my attempts at additional and/or operators, it’s gotten to the point where this could benefit from some serious rework.

 How would you use an if/then structure so that it would work like this?

If under 18, show parent-form

If #18 hide parent-form, unless you’re from #AL, #NE and #MS, in which case show parent-form.

If #19 or #20 hide parent form, unless you’re from #MS, in which case, show parent-form.

If you’re #21-over, hide parent-form.

I'm sure there are other logic approaches to what I outlined above, and I'm open to suggestions. Please keep in mind, because of data points we will be collecting, I need to keep the ages separated as I have them in the form.

 Any help would be appreciated.