1. Home
2.  > 
3. Guide
4.  > 
5. How To
6.  > 
7. Editors
8.  > 
9. Forms
10.  > 
11. Slate Select Boxes

Slate Select Boxes

Customize the Slate Select Boxes by adding JavaScript to individual forms. 

Using Slate, the select boxes default to a blank option with no value. With JavaScript add text to that option that will serve has helper text.

General Instructions

1. Navigate to the form inside the Slate Admin
   1. /manage/form/
   2. Select Form
2. Select Edit Form
3. Select Edit Scripts
4. Insert appropriate script lines
   1. For actual script, see below
5. Save
6. Check live version of form
   1. Helper text should be visible
   2. Validation should be the same - helper text does not validate a required field

Scripts

Date of Birth

Include script for any form that includes the Date of Birth field. The JS will look for fields with an id that ends in _d, _m, _y. Double check if there are additional date fields in the form. Insert the following script: 

//Month - replace blank value
$("[id ^=form_][id $=_m] option[value='']").text('Month');

//Day - replace blank value
$("[id ^=form_][id $=_d] option[value='']").text('Day');

//Year - replace empty option
$("[id ^=form_][id $=_y] option:empty").text("Year").val('');

Grade Level

Include script for any form that includes Grade Level. The JS will look for options that include text of 'grade.' Double check if there are additional fields with this value. Depending on the month of the year, we will use a slightly different version.

September - June

//Grade Level - look for options with grade, then an empty sibling.
$( "select option:contains(grade)" ).siblings('option:empty').text('Select 2016-2017 Grade Level').val(''); 

July - August

(TBD)