Provide a age group box for a client. The age group box is a <select> with a series of checkboxes inside.

age_group_checkbox.html

    <!-- BEGIN SalsaStaff 366219: Put a fieldset containing "nn-nn years old" optional groups after the Organization field in a
    Salsa Classic form. The optional groups are all of subgroups to the "Age Groups" group.

    The age group box will apppear on any page that has

    1. "An Organization" field.
    2. This special html.

    <div style="display: none;" id="show-age-group-box"></div>

    The best place for the HTML is in the Pre-Submit footer on any Classic page.  If there's a page without a Pre-Submitter, then put 
    the HTML in any field that does not have a WYSIWYG editor.
    -->

    <div class="formRow">
        <fieldset id="age-group-fieldset" style="display: none;">
            <legend>What age group(s) of young people does your organization work with?</legend>
            <ul>
            <?
                // SalsaScript to retrieve the groups whose parent is "Age Groups" (groups_KEY 177130).
                // The results are stored in a hidden fieldset.  
                var groups = DB.getObjects("groups", { conditions: [ new Condition("parent_KEY", "=", "177130") ], orderBy: "groups_KEY" });
                for each(g in groups) {
            ?>
                <li>
                    <input type="hidden" name="link" value="groups">
                    <input id="add_to_groups_KEY<?= g.groups_KEY ?>_checkbox" type="checkbox" value="<?= g.groups_KEY ?>" name="linkKey">
                    <label for="add_to_groups_KEY<?= g.groups_KEY ?>_checkbox"><?= g.Group_Name ?></label>
                </li>
            <?
                }
            ?>
            </ul>
        </fieldset>
    </div>
    <script type="text/javascript">
        $(document).ready(() => {
            if ($('#show-age-group-box').length > 0) {
                var target = $("input[name='Organization']").parent();
                if (target.length == 0) { return; }
                $("#age-group-fieldset").insertAfter(target);
                $("#age-group-fieldset").show();
            }
        });
    </script>
    <style type="text/css">
        #age-group-fieldset {
            margin-bottom: 10px;
            /* Width matches dropdown... */
            width: 450px;
            border: 1pt solid black;
            padding: 0px;
        }
        #age-group-fieldset legend {
            font-weight: normal !important;
            text-transform: initial;
            border: none;
            width: auto;
            display: inline-block;
            margin-left: 20px;
            padding-left: 10px;
            padding-right: 10px;
        }
        #age-group-fieldset ul {
            list-style-type: none;
            margin-bottom: 0px;
        }
    </style>

<!-- END   SalsaStaff 366219: Put a fieldset containing age group optional groups after the Organization field in a form. -->

Summary

A client-specific solution to add an age group box to a Salsa Classic page.

Product

• This solution is only valid on Salsa Classic.
• This solution is not application to Salsa CRM.
• This solution is not applicable to Salsa Engage.

Restrictions

This solution is only valid for donation pages and signup pages.

If you need to use another type of page (for example, a targeted action), then please send mail to [email protected]. We'll be glad to help.

What you need

1. A donation or signup page where you'd like the age group box to appear.
2. A group named "Age Groups" with groups_KEY 177130.

Installation

Is it already installed?

The first step is to figure out if the script is already installed. Here are some steps you can use.

1. Edit a Salsa Classic web template. Click here if you need help getting started.
2. Use the browser's search tool to find "show-age-range-box" (without the quotes).
3. If the search is successful, then go to the section named "Configuration" in this note.
4. If the search was not successful, then it's time to install the solution into the template.

Install into the template

1. Use the browser's search tool to locate the </body> tag.
2. Insert an empty line just above the </body> tag.
3. Locate the file named "age_group_box.html" (above).
4. Locate and click the "Raw" button. A new window will appear that contains just the script.
5. Copy the contents of the script.
6. Use the "Back" button to return to this page so that you'll have the rest of the process handy.
7. Navigate to the template editor.
8. Paste the copied text into the newly inserted space above the </body> tag.
9. Save the template.

Configuration

The next step is to configure the donation/signup page so that the group age box appears.

Donation pages

1. Edit the page.
2. Click on the "Optional text" tab.
3. Locate the "Pre-submit footer" field.
4. If the "Pre-submit footer" field already has contents, then insert a blank line at the very top of the field.
5. Copy this HTML.

<div style="display: none;" id="show-age-group-box"></div>

1. Paste the HTML into the top of the "Pre-submit footer" field. It should appear before any other text.
2. Save your work.

Signup pages

1. Edit the page.
2. Click on the "Optional text" tab.
3. Locate the "Content after the submit button" field.
4. If the "Content after the submit button" field already has contents, then insert a blank line at the very top of the field.
5. Copy this HTML.

<div style="display: none;" id="show-age-group-box"></div>

1. Paste the HTML into the top of the "Content after the submit button" field. It should appear before any other text.
2. Save your work.

Testing

The best way to know if the solution was properly installed is to view the page that you just edited. You'll know you're successful if you see the age group box just under the "Occupation" field.

Questions? Comments?

If you have any questions or comments, then please gather this information.

• Your organization_KEY
• The URL for this page.
• The URL for web template.
• The URL for modified page.
• A description of the issue.

Send the gathered info to [email protected]. We'll be glad to help,