JavaScript examples for LimeSurvey: next page on click, character counter and more

JavaScript examples you can copy

About these examples

Five scripts for common tasks: go to the next page when an answer is chosen, count characters, write in capital letters, save the screen size and keep Next locked for a few seconds. Each script goes into the text of one question. {QID} in a script stands for the ID of that question, and LimeSurvey fills it in when the page loads, so you can paste a script into any question without changing it. All five were tested in the preview with the Fruity TwentyThree theme.

Note: Scripts run when the survey is shown, in the preview too, but not in the editor. To save a script in a question, your user needs permission to add scripts. See Add JavaScript to your survey.

Add an example to a question

  1. Click the text of the question the example is for. The text toolbar appears.
  2. Click ⋮ and then Edit as HTML.
  3. Paste the example below the question text and click Save.
  4. Click the eye icon in the top bar and try it in the preview.

Go to the next page when an answer is chosen

For a List (radio) question. A click on an answer works like a click on Next, so participants move on without an extra click. Put the question last on its page: the click submits the whole page. On the last page of the survey, the click submits the survey.

<script>
$(document).on('ready pjax:complete', function() {
  $('#question{QID} input[type="radio"]').off('click.next').on('click.next', function() {
    $('#ls-button-submit').trigger('click');
  });
});
</script>

Show a character counter under a text box

For a Long text question. A line under the box counts the characters while participants type, for example 14 characters. To set a limit, use Max characters under General in the question settings.

<script>
$(document).on('ready pjax:complete', function() {
  var box = $('#question{QID} textarea');
  if (!box.length || box.next('.char-count').length) { return; }
  var info = $('<div class="char-count"></div>').insertAfter(box);
  var show = function() { info.text(box.val().length + ' characters'); };
  box.on('input', show);
  show();
});
</script>

Write the answer in capital letters

For a Short text question, such as a postal code or a license plate. Letters turn into capitals while participants type, and the answer is stored in capitals. For grey example text in the empty field, such as For example: 1234 AB, you don't need a script: use Placeholder answer under Display in the question settings.

<script>
$(document).on('ready pjax:complete', function() {
  $('#question{QID} input[type="text"]').off('input.upper').on('input.upper', function() {
    this.value = this.value.toUpperCase();
  });
});
</script>

Save the screen size of the participant's device

For a Short text question. The script writes the screen size in pixels, such as 1728x1117, into the answer field and hides the question. The value counts as the answer to the question, the same as typed text: a later page can show it with the question code in curly brackets, such as {Q034}. See Piping: use answers from previous questions.

Note: Leave Always hide this question off for this question. That setting leaves the question out of the page, so the script doesn't run and no value is saved. The script hides the question itself.

<script>
$(document).on('ready pjax:complete', function() {
  $('#question{QID} input[type="text"]').val(screen.width + 'x' + screen.height);
  $('#question{QID}').hide();
});
</script>

Keep the Next button locked for a few seconds

For any question on the page, for example a Text display question with instructions. Next stays grey for 10 seconds, so participants read the page before they move on. On the last page, the same happens to Submit. To change the time, change 10000: the time is in milliseconds.

<script>
$(document).on('ready pjax:complete', function() {
  if (!$('#question{QID}').length) { return; }
  var next = $('#ls-button-submit').prop('disabled', true);
  setTimeout(function() { next.prop('disabled', false); }, 10000);
});
</script>

Next steps

FAQ

Nothing happens in the editor. Is the script broken?

No. Scripts run in the preview and in the survey, not in the editor. Click the eye icon in the top bar to test the page.

Can I use two examples on the same question?

Yes. Put the lines of both inside one $(document).on('ready pjax:complete', function() { ... }); block, below the question text. Keep a space or a line break after every { and before every }, as in the examples: ExpressionScript reads text in curly brackets as an expression. {QID} is the one exception that LimeSurvey fills in.

The examples use #ls-button-submit. What is it?

It is the ID of the Next button, which becomes Submit on the last page, in the Fruity TwentyThree theme. If your survey uses another theme, check the ID in the preview with the Inspect function of your browser.