Survey Data

Example of sharing data between matrix dynamic and panel dynamic questions

                        



var json = {
    "pages": [{
        "name": "page1",
        "title": "Who are you employed by?",
        "elements": [
            {
              "type": "matrixdynamic",
              "minRowCount": 1,
              "rowCount":  1,
              "name": "employer_names",
              "valueName": "employers",
              "isRequired": true,
              "title": "Please enter all your employers",
              "addRowText": "Add another employer",
              "columns": [
                {"name":  "name", "isRequired":  true, "title": "Name of employer", "cellType":  "text" }
              ],
          }
        ]
    },
    {
        "name": "page2",
        "title": "Tells us about your employer(s)",
        "elements": [
            {
                "type": "paneldynamic",
                "renderMode": "list",
                "allowAddPanel": false,
                "allowRemovePanel": false,
                "name": "arrray_employer_info",
                "title": "Your employers",
                "valueName": "employers",
                "templateTitle": "Employer name: {panel.name}",
                "templateElements": [
                    {
                        "type": "panel",
                        "name": "panel_mployer_address",
                        "title": "Address",
                        "elements": [{
                            "type": "text",
                            "name": "employer_address",
                            "valueName": "address",
                            "title": "Address"
                        },
                        {
                            "type": "text",
                            "name": "employer_phone",
                            "valueName": "phone",
                            "title": "Phone number:"
                        },
                        {
                            "type": "text",
                            "name": "employer_abn",
                            "valueName": "abn",
                            "title": "ABN"
                        }
                        ]
                    },
                    {
                        "type": "panel",
                        "name": "panel_employer_role",
                        "title": "What is your role?",
                        "elements": [
                            {
                                "type": "radiogroup",
                                "choices": [
                                    "Full time",
                                    "Part time",
                                    "Casual",
                                    "Seasonal"
                                ],
                                "name": "employer_role",
                                "title": "Your role",
                                "valueName": "role"
                            }
                        ]
                    },
                    {
                        "type": "panel",
                        "name": "panel_employer_hours_work",
                        "title": "What hours do you work?",
                        "elements": [
                            {
                                "type": "text",
                                "inputType": "number",
                                "name": "member_hours_worked",
                                "valueName": "hours_worked",
                                "title": "Hours:"
                            },
                            {
                                "type": "dropdown",
                                "name": "member_hours_worked_frequency",
                                "title": "Worked Frequency:",
                                "valueName": "hours_worked_frequency",
                                "startWithNewLine": false,
                                "defaultValue": "Year",
                                "choices": [
                                    "Day",
                                    "Week",
                                    "Fortnight",
                                    "Month",
                                    "Year"
                                ]
                            }
                        ]
                    },
                    {
                        "type": "panel",
                        "name": "panel_employer_income",
                        "title": "What income do you receive?",
                        "elements": [
                            {
                                "type": "text",
                                "inputType": "number",
                                "name": "employer_income",
                                "valueName": "income",
                                "title": "Income:"
                            },
                            {
                                "type": "dropdown",
                                "name": "employer_income_frequency",
                                "title": "Income Frequency",
                                "valueName": "income_frequency",
                                "startWithNewLine": false,
                                "defaultValue": "Year",
                                "choices": [
                                    "Day",
                                    "Week",
                                    "Fortnight",
                                    "Month",
                                    "Year"
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
    ],
    "showQuestionNumbers": "off"
};

window.survey = new Survey.Model(json);


survey.onComplete.add(function(result) {
    document.querySelector('#surveyResult').innerHTML = "result: " + JSON.stringify(result.data);
});


$("#surveyElement").Survey({ 
    model: survey 
});


                    
<!DOCTYPE html>
<html>
<head>
    <title>Example of sharing data between matrix dynamic and panel dynamic questions, jQuery Survey Library Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/jquery"></script>
<script src="https://surveyjs.azureedge.net/1.0.59/survey.jquery.js"></script>
<link href="https://surveyjs.azureedge.net/1.0.59/survey.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

</head>
<body>
                <div id="surveyElement">
            </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 writting single line of JavaScript code and even non-developers are able to create forms like this.