Question T13685
Visible to All Users

How to populate form with URL query parameter

created 2 years ago

Hi,

I have a form that has username, firstname and lastname fields.

But when the user goes to the url, there is a query parameter for the username field.

So, something like www.example.com/forms?username=Jane.

I would like to automatically populate the username field on the form using the username value from the query string, so that the user only has to fill out the firstname and lastname.

Is there an easy way to achieve this with surveyjs or do I have to implement a custom function?

Answers approved by surveyjs Support

created 2 years ago

Hello Vito,
To predefine survey question values, you can parse your query parameters and pass them to a survey before running the survey.

Set Question Answers

The first option is to set the survey.data property or use the survey.mergeData(newDataObj) function. The main difference is that the survey.data property resets default question values, while the mergeData function preserves default question values. Please review the Populate Form Fields help topic for detailed information about this.

JavaScript
// Retrieve query parameter values from a URL let firstNameParam = { firstName: "Jane" } // Set survey answers survey.mergeData(firstNameParam);

View Demo

Specify Default Value Expressions

Alternatively, you can specify the defaultValueExpression property of survey questions. Use survey variables in expressions which you define as defaultValueExpression property values. Before running a survey, use the survey.setVariable(name, value) method to programmatically set a survey variable value. For more information on using survey variables and expressions, refer to the following guide: Conditional Logic and Dynamic Texts. To learn how to preconfigure default question values using expressions, check the following demo: Dynamic Default Question Values.

JavaScript
// Retrieve query parameter values from a URL let firstName = "Jane"; // Set survey variable values survey.setVariable('firstNameVar', firstName); ... const json = { "pages": [ { "name": "page1", "elements": [ { "type": "text", "name": "firstName", "title": "First Name", "defaultValueExpression": "{firstNameVar}" }, { "type": "text", "name": "lastName", "title": "Last Name" } ] } ] }

View Demo

Should you have any questions or require further assistance, we are here to help.

    Comments (3)

      The 2 options work perfectly when the fields are visible in the form.

      But I also want to store data from the URL parameter even when the form question is not visible (i.e. the user unchecks the "visible" field when creating the form in survey creator), how do I do that?

      Preferably, how do I do it using the defaultValueExpression method?

        Hi Vito,
        Thank you for the update. You can keep the defaultValueExpression. By default, a survey clears invisible question values on completion.
        If you wish to preserve values of invisible questions and include them to survey results, set the survey.clearInvisibleValues property to "none".

        JSON
        { "logoPosition": "right", "clearInvisibleValues": "none", "pages": [ { "name": "page1", "elements": [ { "type": "text", "name": "firstName", "title": "First Name", "defaultValueExpression": "{firstNameVar}", visible: false }, { "type": "text", "name": "lastName", "title": "Last Name" } ] } ] }

        I updated the demo: https://plnkr.co/edit/KEJoGhaE8saj2LQs.

        Drop me a line if you have additional questions.

        P.S. We hope you enjoyed the level of service you received. If so, we would love if you could leave your feedback on SurveyJS page at g2.com. As we’re building our business, every review helps build credibility for future customers and your feedback would be greatly appreciated.

          This works nicely. Thank you