How to customise the numeric inputs to set a range of values or to be whole numbers?

All numeric inputs can have settings applied to them to restrict the values that may be entered by respondents.

Some common examples include setting a:

• Minimum value
• Maximum value
• Step (e.g. to allow only whole numbers, one could set the step to 1)

These settings need to be set using survey customisation via JavaScript.

Steps to add properties to numeric inputs:

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.

The selector:

For numeric input questions, the selector will be of the form:

$("#additionalQuestions[QUESTION-NUMBER]-short-answer")

Where [QUESTION-NUMBER] needs to be replaced by 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).

For example, here Q3 is the question we want to customise, so our selector will be: $("#additionalQuestions3-short-answer")

For Van Westendorp questions, the selector does not require a question number and will apply to all Van Westendorp inputs: $("input[name*='[vw]'][type='number']")

The properties

Now that we have the selector created, we can apply the desired properties, these will be added, one at a time, and may include:

• Setting a minimum value using .prop(‘min’, [MIN-VALUE]), where [MIN-VALUE] is the desired minimum. For example:
  • Minimum of 0: $("#additionalQuestions3-short-answer").prop(‘min’,0);
  • Minimum of 25: $("#additionalQuestions3-short-answer").prop(‘min’,25);

• Setting a maximum value using .prop(‘max’, [MAX-VALUE]), where [MAX-VALUE] is the desired maximum. For example:
  • Maximum of 999: $("#additionalQuestions3-short-answer").prop(‘max’,999);

• Setting the step using .prop(‘step’,[STEP-VALUE]), where [STEP-VALUE] is the desired step. For example:
  • Step of 1 (whole numbers only): $("#additionalQuestions3-short-answer").prop(‘step’,1);
  • Step of 100 (multiple of 100 only): $("#additionalQuestions3-short-answer").prop(‘step’,100);.
  • Note, if you set a min value of 33, and a step of 100, acceptable values will be 33, 133, 233, etc.

• Combining properties: you can chain multiple properties together. For example:
  • Setting a min of 0, max of 100, and step of 5: $("#additionalQuestions3-short-answer").prop(‘min’,0).prop(‘max’,100).prop(‘step’,5);.
  • This will only allow values of 0, 5, 10, …, 90, 95, 100.