Multiple Textboxes

Edit in →

A Multiple Text Box question contains multiple text entry fields that allow users to enter more than one short text response in a single question. This question type is perfect if you need to collect answers to a group of related open-ended questions without choice options (contact information, full legal name). Built-in input validation allows you to verify input values and make sure they conform with the specified format, such as an email, password, or phone number. This demo shows how to create and add a question with multiple responses to a form and run it in your JavaScript framework.

Create a Multiple Text Box Question

To create a question with multiple text input fields, define an object with the type property set to "multipletext" and add it to the elements array. Use the items array to configure the text input fields. Each object in this array should have at least the following properties:

{
  "name": any, // A unique value used to identify an input item and save an item value to survey results.
  "title": String // An item caption. When `title` is undefined, `name` is used. This property supports Markdown.
}

For a full list of available properties, refer to the MultipleTextItemModel class documentation.

Specify Input Type

If an input field requires specific values, use the inputType property to specify the input type. An inputType value is passed on to the type attribute of the underlying <input> HTML element. This example demonstrates the "number", "email", "password", and the default "text" input types.

Validate Input Values

If you need to ensure that respondents fill out all required form fields and the format of values is correct, enable data validation. This example demonstrates the following validation types and describes how to configure them:

  • Required Validation
    Enable the isRequired property for the form fields that should not be empty.

  • Number Range Validation
    Define an object with the type property set to "numeric" and add it to the validators array. Use the minValue and maxValue properties within this object to specify the range. Alternatively, you can use the min and max properties in the question object.

  • Expression Validation
    Define an object with the type property set to "expression" and add it to the validators array. Assign a Boolean expression to the expression property within this object (see the "Highest price" form field in this demo).

  • RegEx Validation
    Define an object with the type property set to "regex" and add it to the validators array. Assign a regular expression to the regex property within this object (see the Password form field in this demo).

To learn more about data validation in SurveyJS Form Library, refer to the following help topic: Data Validation.

Access Input Values

A Multiple Text Box question adds an object with the structure described below to survey results:

{
  "multipleTextBoxQuestionName": { // Question name
    // Individual text field values
    "item1Name": "item1Value",
    "item2Name": "item2Value",
    // ...
    "itemNName": "itemNValue"
  }
}

Refer to the following help topic for information on how to access individual item values in JavaScript code: Access Survey Results.

If you want to reference an item in expressions, use the following notation: {questionname.itemname}. For more information about expression syntax, refer to the Conditional Logic and Dynamic Texts documentation article.

Your cookie settings

We use cookies on our site to make your browsing experience more convenient and personal. In some cases, they are essential to making the site work properly. By clicking "Accept All", you consent to the use of all cookies in accordance with our Terms of Use & Privacy Statement. However, you may visit "Cookie settings" to provide a controlled consent.

Your renewal subscription expires soon.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.

Your renewal subscription has expired.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.