How to customise numeric inputs?


You can restrict the numeric values that may be entered by respondents. For example, you can set a minimum value, maximum value, or step size (such as 1 for whole numbers only). This can be achieved through customisations.

The customisation code will have two parts, first a selector that indicates which question we wish to customise, and second, the properties we wish to apply.

Create a selector

For numeric input questions, use the selector $("#additionalQuestions[QUESTION-NUMBER]-short-answer"). Replace [QUESTION-NUMBER] with the auto-assigned question number of the question we’re customising. This can be found in the question list (either on the Additional questions tab, or Questions tab). Note that changing question order may alter these numbers, and you will need to update your code.

For example, to customise Q3, use the selector $("#additionalQuestions3-short-answer").

For Van Westendorp questions, use $("input[name*='[vw]'][type='number']") to apply to all Van Westendorp inputs without specifying a question number.

Apply properties

After creating the selector, apply desired properties one at a time:

  • Set minimum value: .prop(‘min’, [MIN-VALUE])
  • Set maximum value: .prop(‘max’, [MAX-VALUE])
  • Set step value: .prop(‘step’,[STEP-VALUE])

You may also combine properties by chain multiple properties together. For example,

$("#additionalQuestions3-short-answer").prop(min,0).prop(max,100).prop(step,5);

This setting enforces Q3 inputs to only allow values of 0, 5, 10, …, 90, 95, 100.