Using CSS Classes in JavaScript

Important Update to Custom Scripting

SurveyGizmo's CustomScript Action now supports the LUA programming language. Visit our NEW Lua Scripting Resources!

Legacy Custom Scripting Language Deprecation Plans 

  1. New accounts (created after October 29, 2018) will only have the option to use Lua in scripts.
  2. As of October 29, 2018 Custom Scripting Actions will default to Lua as the scripting type in the Custom Scripting Action for accounts created before this date. You will be able to switch to the Legacy Custom Scripting; though we highly encourage using Lua.
  3. In the long term, Legacy Custom Scripting Actions will be switched to read-only. The exact date on this is to be determined; we will send notifications well ahead of time.

When you are writing Javascript in SurveyGizmo and need to interact with the DOM, the most straightforward option is often to use the IDs of the specific elements that you are interacting with. 

For example, here is the HTML for an individual textbox question in a survey:

<div id="sgE-2081629-1-3-box" class="sg-question sg-type-textbox first">
        <input type="hidden" id="sgE-2081629-1-3-meta" name="sgE-2081629-1-3-meta" value="hidden=false&amp;required=false">
        <input type="hidden" id="sgE-2081629-1-3-time" name="sgE-2081629-1-3-time" value="">
            <div class="sg-question-title">
                <label for="sgE-2081629-1-3-element">
                <span class="sg-question-number">2.</span> Most important philosopher</label>
                </div>
            <div class="sg-question-options">   
        <div class="sg-control-text sg-control-text">

            <input type="text" id="sgE-2081629-1-3-element" name="sgE-2081629-1-3" title="Most important philosopher" class="sg-input sg-input-text " value="">    </div>
                <!-- /sg-question-options -->
            </div>
            <!-- /sge-box -->
    </div>

You could access the value of the input with an ID like so:

JavaScript:

document.getElementById('sgE-2081629-1-3-element').value

JQuery:

 $('#sgE-2081629-1-3-element').val();

The largest drawback to using the ID is that it makes it more difficult to change your survey and/or reuse your script. If you were to make a copy of the survey, the ID of the input would change. Element IDs are made up of the survey ID, plus the page ID plus the element ID.

Instead, you can assign a CSS Class Name to the question and use that to find the element. You can assign a CSS Class Name to a question on the Layout tab of the question.

Then you would access the value of the input like this:

JavaScript:

document.getElementsByClassName('first'); 

JQuery:

$('.first .sg-input-text').val();

Now, if you were to copy the survey, the script would continue working because the selectors used would remain the same!

Scripting and Other Out-of-the-Box Customizations

We’re always happy to help you debug any documented script. That said, we do not have the resources to write scripts on demand.

If you have customization ideas that you haven't figured out how to tackle, we're happy to be a sounding board for SurveyGizmo features and functionality ideas that might meet your customization. Beyond this, you might want to consult with someone on our Programming Services Team; these folks might have the scripting chops to help you to achieve what you are looking for!