-
Templates
-
Simple Questions
-
Text Entry
-
Date-Time Entry
-
Numeric Entry
-
Color Input
-
Radio Button Group
-
Dropdown
-
Dropdown: Load Data from Web Services
-
Dropdown with Lazy Loading
-
Multi-Select Dropdown
-
Checkboxes
-
Carry Forward Responses
-
Image Picker
-
Yes/No Question
-
Signature
-
Multiple Textboxes
-
Rating Scale
-
Rating Scale UI Adaptation Modes
-
Ranking
-
Long Text
-
Image
-
HTML
-
File Upload
-
Expression
-
Expression (using async functions)
-
-
Matrix Table Questions
-
Panel & Dynamic Panel
-
Survey
-
Title and Logo
-
Questions in one line
-
Survey Options
-
Auto-Populate Form Fields
-
Merge Question Values
-
Edit saved survey
-
Read-only/display mode
-
Show Preview before complete
-
Pop-Up Survey
-
Context actions in element titles
-
Modify title tags
-
Custom render of survey elements
-
File - custom preview
-
File - delayed upload
-
Lazy questions rendering
-
-
Quizzes and Scored Surveys
-
Customize Rendering
-
Integration with Third-Party Libraries
-
Appearance customization
-
Navigation
-
Conditions and Triggers
-
Conditional Visibility
-
Simplify Cascade Conditions
-
Dynamic Default Question Values
-
Complex Questions in Expressions
-
Custom Functions in Expressions
-
Implement a Custom Expression Property
-
Dynamic Questions with Conditional Logic
-
Hide Question Elements (Rows, Columns, Choices)
-
Show/Hide individual items in radiogroup/checkbox/dropdown
-
Hide Rows and Columns in a Matrix Table
-
Hide Rows and Columns in a Matrix Dropdown Question
-
Conditional Logic to Enable or Disable Questions
-
Complete Trigger
-
CopyValue Trigger
-
SetValue Trigger
-
Run Expression Trigger
-
-
Text Formatting
-
Survey Localization
-
Input Validation
-
SurveyJS Storage
Multiple Textboxes
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 theisRequired
property for the form fields that should not be empty.Number Range Validation
Define an object with thetype
property set to"numeric"
and add it to thevalidators
array. Use theminValue
andmaxValue
properties within this object to specify the range. Alternatively, you can use themin
andmax
properties in the question object.Expression Validation
Define an object with thetype
property set to"expression"
and add it to thevalidators
array. Assign a Boolean expression to theexpression
property within this object (see the "Highest price" form field in this demo).RegEx Validation
Define an object with thetype
property set to"regex"
and add it to thevalidators
array. Assign a regular expression to theregex
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.
-
Templates
-
Simple Questions
-
Text Entry
-
Date-Time Entry
-
Numeric Entry
-
Color Input
-
Radio Button Group
-
Dropdown
-
Dropdown: Load Data from Web Services
-
Dropdown with Lazy Loading
-
Multi-Select Dropdown
-
Checkboxes
-
Carry Forward Responses
-
Image Picker
-
Yes/No Question
-
Signature
-
Multiple Textboxes
-
Rating Scale
-
Rating Scale UI Adaptation Modes
-
Ranking
-
Long Text
-
Image
-
HTML
-
File Upload
-
Expression
-
Expression (using async functions)
-
-
Matrix Table Questions
-
Panel & Dynamic Panel
-
Survey
-
Title and Logo
-
Questions in one line
-
Survey Options
-
Auto-Populate Form Fields
-
Merge Question Values
-
Edit saved survey
-
Read-only/display mode
-
Show Preview before complete
-
Pop-Up Survey
-
Context actions in element titles
-
Modify title tags
-
Custom render of survey elements
-
File - custom preview
-
File - delayed upload
-
Lazy questions rendering
-
-
Quizzes and Scored Surveys
-
Customize Rendering
-
Integration with Third-Party Libraries
-
Appearance customization
-
Navigation
-
Conditions and Triggers
-
Conditional Visibility
-
Simplify Cascade Conditions
-
Dynamic Default Question Values
-
Complex Questions in Expressions
-
Custom Functions in Expressions
-
Implement a Custom Expression Property
-
Dynamic Questions with Conditional Logic
-
Hide Question Elements (Rows, Columns, Choices)
-
Show/Hide individual items in radiogroup/checkbox/dropdown
-
Hide Rows and Columns in a Matrix Table
-
Hide Rows and Columns in a Matrix Dropdown Question
-
Conditional Logic to Enable or Disable Questions
-
Complete Trigger
-
CopyValue Trigger
-
SetValue Trigger
-
Run Expression Trigger
-
-
Text Formatting
-
Survey Localization
-
Input Validation
-
SurveyJS Storage