CiviCRM Community Forums (archive)

Being relatively new to both Civi and jQuery, I wanted to post this should anyone else benefit from what I've recently discovered.

We are currently doing online registration for a kids day camp using Drupal Webform and Civi, and taking in a number of fields including the kids' birth dates.  By default, Civi and Webform offer a year select list that begins with the year 100 years ago.  All of the kids at our camp will be 13 or under.  I needed to limit the number of years in the select list so parents didn't have to scroll through 85+ years.  I couldn't find a way to limit the years from within Civi or Drupal, so I turned to jQuery.  I could have reversed the list with jQuery, but I wanted the years hidden/removed altogether.

The solution we used is to add a Markup field (with Full HTML text-format) to the bottom of our webform.  I initially tried using jQuery's .hide(), but found it presented problems in IE11 and Chrome in our particular setup.  So I ended up using the below code.  First, you tell Drupal that the $ is for jQuery.  Second, select the element in question with $, then 'grab' a certain number of options from the list with .slice(), then remove them with .remove().  We allow registration of up to 5 kids with one form, so I repeated the code 5 times with variations in the element IDs.  The parent/guardian is contact 1, so that's why Child 1 begins with #edit-submitted-civicrm-2-contact.  Hope this helps!

<script>
$=jQuery;
$('#edit-submitted-civicrm-2-contact-1-fieldset-fieldset-child-1-demographic-civicrm-2-contact-1-contact-birth-date-year option').slice(-101,-14).remove();
$('#edit-submitted-civicrm-3-contact-1-fieldset-fieldset-child-2-demographic-civicrm-3-contact-1-contact-birth-date-year option').slice(-101,-14).remove();
$('#edit-submitted-civicrm-4-contact-1-fieldset-fieldset-child-3-demographic-civicrm-4-contact-1-contact-birth-date-year option').slice(-101,-14).remove();
$('#edit-submitted-civicrm-5-contact-1-fieldset-fieldset-child-4-demographic-civicrm-5-contact-1-contact-birth-date-year option').slice(-101,-14).remove();
$('#edit-submitted-civicrm-6-contact-1-fieldset-fieldset-child-5-demographic-civicrm-6-contact-1-contact-birth-date-year option').slice(-101,-14).remove();
</script>
Anybody know how to limit the years from within Civi or Drupal?

Thanks Joanne!  We're an organization that runs the whole spectrum of ages, so looks like we'll have to take it form by form.