Cart Licenses Contact Support Online Creator Log in/Register
Try
Buy
v 1.9.51

Survey Data


                        
        
            Survey.StylesManager.applyTheme("defaultV2");
        



                
                    var json = {
  "pages": [
    {
      "name": "page1",
      "elements": [
        {
          "type": "matrixdynamic",
          "name": "employer_names",
          "title": "Please enter all your employers names",
          "valueName": "employers",
          "isRequired": true,
          "showHeader": false,
          "columns": [
            {
              "name": "name",
              "cellType": "text",
              "isRequired": true
            }
          ],
          "rowCount": 1,
          "minRowCount": 1,
          "addRowText": "Add another employer"
        },
        {
          "type": "paneldynamic",
          "name": "arrray_employer_info",
          "title": "Your employers",
          "valueName": "employers",
          "templateElements": [
            {
              "type": "panel",
              "name": "panel_mployer_address",
              "elements": [
                {
                  "type": "text",
                  "name": "employer_address",
                  "title": "Address",
                  "titleLocation": "left",
                  "valueName": "address"
                },
                {
                  "type": "text",
                  "name": "employer_phone",
                  "startWithNewLine": false,
                  "title": "Phone number:",
                  "titleLocation": "left",
                  "valueName": "phone"
                }
              ]
            }
          ],
          "templateTitle": "Employer name: {panel.name}",
          "allowAddPanel": false,
          "allowRemovePanel": false
        }
      ],
      "title": "Who are you employed by?"
    },
    {
      "name": "page1",
      "elements": [
        {
          "type": "checkbox",
          "name": "cars",
          "valuePropertyName": "carProducer",
          "title": "What car did you own?",
          "isRequired": true,
          "maxSelectedChoices": 5,
          "colCount": 2,
          "choices": [ "Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota", "Citroen", "Tesla" ]
        },
        {
          "type": "paneldynamic",
          "name": "cars_info",
          "title": "Please describe your car",
          "valueName": "cars",
          "templateElements": [
            {
              "type": "dropdown",
              "name": "years",
              "title": "How long did you own it?",
              "titleLocation": "left",
              "choicesMin": 1,
              "choicesMax": 30
            },
            {
              "type": "rating",
              "name": "rating",
              "title": "Please rate it",
              "titleLocation": "left",
              "startWithNewLine": false
            },
            {
              "type": "comment",
              "name": "comment",
              "title": "Please leave hte comment:"
            }
          ],
          "templateTitle": "Car: {panel.carProducer}",
          "allowAddPanel": false,
          "allowRemovePanel": false
        }
      ],
      "title": "What cars did you own?"
    }
  ],
  "showQuestionNumbers": "off"
};

                    window.survey = new Survey.Model(json);
                
        
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
            });
        
        
            $("#surveyElement").Survey({
            model: survey 
            });
        

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Survey Data, jQuery Survey Library Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/jquery"></script>
    <script src="/DevBuilds/survey-jquery/survey.jquery.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

</head>
<body style="margin: 0">
    
            <div id="surveyElement" style="display:inline-block;width:100%;">
            </div>
    <div id="surveyResult"></div>

<script type="text/javascript" src="./index.js"></script>

</body>
</html>

In this example, on the first page a user should enter the list of his current employers and on the next page fill the information about each of them.

On the first page, we are using Matrix Dynamic question. It is allows to create an array of objects.

On the second page, we are using Panel Dynamic question. We are disabling row adding and removing by settings its propertyes allowAddPanel and allowRemovePanel to false.

Both questions has the same value for valueName property. In this case it equals "employers". It tells SurveyJS that both questions are editing the same data.
As you see this trick allows to create a complex form without writing single line of JavaScript code and even non-developers are able to create forms like this.