Getting Started Using JavaScipt in SurveyGizmo

While SurveyGizmo is one of the most flexible survey tools out there, we get a few requests here and there for customizations that are not available. This is where JavaScript and Custom Scripting can save the day. If you have scripting chops you can use the JavaScript action or the Custom Scripting action to achieve your perfect survey.

To add a JavaScript action to your survey, click the Action button at the bottom of any page in your survey.

Give your action a name. It's a good idea to describe what the action is doing in the name, for example, "Disable after answering." Select JavaScript from the menu and click Save Action and Edit.

Next, write or paste in the JavaScript you'd like to run. Please note that above and below the field there are opening and closing script tags. This means you will not need to include the opening and closing script tags.

Using Logic in JavaScript Actions

On the Logic tab you can set up conditions for when you want your JavaScript action to run.

Change the Script Editor Look & Feel

If you want to change the look of the script editor, you can choose a different color scheme on the Advanced tab of your action. 

What Can I Do With JavaScript?

The possibilities are endless. Choose your own adventure! Below are some small example customizations that the support team has come across. You can also check out our Working Examples of JavaScript.

Example One: Disable a Radio Button After it is Answered

Check it out in an example survey

!

$(document).ready(function(){
$(":radio").click(function(){
   var radioName = $(this).attr("name"); //Get radio name
   $(":radio[name='"+radioName+"']").attr("disabled", true); //Disable all with the same name
});
	$('.sg-survey-form').submit(function(){
      $(':disabled').prop('disabled', false);
    });
})

Example Two: Change Text of a Button on a Specific Page

You can easily change the text for the Next, Back and Submit buttons using the Text & Translations tool. However, if you wish to change the text of a button on a single page in your survey, instead of all the pages, you'll need to use JavaScript.

To change the Next button on a single page add a JavaScript action and paste one of the below codes and replace 'What?' with 'WhateverYouWantYourButtonToRead' and you are all set!

$(function(){
  $('#sg_NextButton').val('What?');
});

To change the Back button, paste the below code and replace 'What?' with 'WhateverYouWantYourButtonToRead' and you are all set!

$(function(){
  $('#sg_BackButton').val('What?');
});

To change the Submit button, paste the below code and replace 'What?' with 'WhateverYouWantYourButtonToRead' and you are all set!

$(function(){
  $('#sg_SubmitButton').val('What?');
});

Example Three: Remove the "Go to First Error" Link

Removing the link within required messages that reads "Go to Girst Error" is a common customization request that requires JavaScript.

Copy and paste the below JavaScript code in a JavaScript action. Then, simply copy this action and move to each page that has required questions.

$(document).ready(function(){
  $("#error-scroll-trigger").hide();
})

Example Four: Change Other Row Header Default Text to Placeholder Text

Default text in other row headers, if not changed by the respondent, is recorded as an answer. Using a little JavaScript, we can change the default text to an HTML5 placeholder which will be immediately replaced when the survey respondent begins to type in the field. 

Copy and paste the below JavaScript code in a JavaScript action on the page with your table. Then, simply change the first instance of "Specify" to whatever you are using in your default text field for other row headers. The second instance of "Specify" should be changed to whatever you wish to display as a placeholder.

$(function(){
  $('input[value="Specify"]').val('').attr("placeholder", "Specify");
});