Question T15122
Visible to All Users

Custom buttons

created a year ago

Could you help, I'm trying to build a survey using your library and have encountered some issues implementing certain features. For instance, I have 25 questions coming from a database. These questions are of various types such as text fields, yes/no, or image pick. My idea is to use panels for each question, displaying them one by one based on user interactions.
For questions that require user input in a text field, I'd like to add a "Next" button to proceed to the next question. Currently, I've set it up so that when a user writes something in the field and then clicks anywhere on the screen, the next panel appears. This is because in the database, I have a "visibleIf" condition that checks if the previous question is not empty.
However, if users don't want to answer a particular question, they should be able to skip it. For radio group options like "Yes" or "No", this approach works. In the database, I have a "visibleIf" condition like {N of question} = 'Yes', etc.
How can I add a custom "Next" button specifically for questions with a comment field?
Or panels working only with triggers like radio group or checkbox or droopdown menu?

Show previous comments (1)

    Thank you for your answer.
    Unfortunately no, this feature that you mentioned doesn't work for me.
    I share pic with easy question examples. In first question even if I do isRequired false I need button like "More" to show next panel and skip question to see next one. On the second question when I click on 'Yes' or 'No' everything works correct and third one appears. Any ideas to add custom button for panel?

      Hello Vic,
      Thank you for the clarification. When questions are placed within the same page, there is no need for a Next/More button. Questions are already available by default. However, if you wish to show/hide questions depending on previous answers, you may wish to use the visibleIf expression. Consider the following survey definition:

      JSON
      { "pages": [ { "name": "page1", "elements": [ { "type": "comment", "name": "question1", "title": "Describe something" }, { "type": "boolean", "name": "question2", "title": "Do you like Cats?" }, { "type": "dropdown", "name": "question3", "visibleIf": "{question2} = true", "title": "What breed of cats do you prefer?", "choices": [ { "value": "Item 1", "text": "Siamese" }, { "value": "Item 2", "text": "Maine Coon" }, { "value": "Item 3", "text": "Scottish Fold" } ] } ] } ] }

      Clipboard-File-1.png

      Please let me know what you think.

        Hello Jane!
        Ok, here you go my JSON file generated when is coming from database.
        As you see everything on one page and questions are panels. Add for panel with textarea buttons like "Skip" or "More" to show next panel, for now working approach is click anywhere on screen to load next panel.
        Maybe you have some more recommendations for structure questions I would happy to know. Thank you so much!

        Code
        { "pages": [ { "name": "singlePage", "elements": [ { "type": "panel", "name": "qbr001Panel", "elements": [ { "type": "comment", "name": "qbr001", "title": "Describe something", "visibleIf": "" } ] }, { "type": "panel", "name": "qbr002Panel", "elements": [ { "type": "radiogroup", "name": "qbr002", "title": "Do you like cats? ", "choices": [ "Yes", "No" ], "visibleIf": "{qbr001} notempty" } ] }, { "type": "panel", "name": "qbr003Panel", "elements": [ { "type": "radiogroup", "name": "qbr003", "title": "Do you like dogs?", "choices": [ "Yes", "No" ], "visibleIf": "{qbr002} = 'No'" } ] }, { "type": "panel", "name": "qbr004Panel", "elements": [ { "type": "comment", "name": "qbr004", "title": "Why?", "visibleIf": "{qbr002} = 'No' and {qbr003} = 'No'" } ] }, { "type": "panel", "name": "qbr005Panel", "elements": [ { "type": "comment", "name": "qbr005", "title": "Which breed?", "visibleIf": "{qbr002} = 'Yes' or {qbr003} = 'Yes'" } ] }, { "type": "panel", "name": "qbr006Panel", "elements": [ { "type": "imagepicker", "name": "qbr006", "title": "choose pictures of dogs", "choices": [ { "value": "img1", "imageLink": "https://images.pexels.com/photos/8386440/pexels-photo-8386440.jpeg?auto=compress&cs=tinysrgb&w=600" }, { "value": "img2", "imageLink": "https:///..." } ], "multiSelect": false, "visibleIf": "{qbr003} = 'Yes' and {qbr005} notempty" } ] }, { "type": "panel", "name": "qbr007Panel", "elements": [ { "type": "imagepicker", "name": "qbr007", "title": "choose cats", "choices": [ { "value": "img1", "imageLink": "https://www....." }, { "imageLink": "https://i.....", "value": "img2" } ], "multiSelect": false, "visibleIf": "{qbr002} = 'Yes' and {qbr005} notempty" } ] } ] } ]

        Answers approved by surveyjs Support

        created a year ago

        Hello,
        Thank you for sharing the JSON. A user has to click outside an input to submit the value for the first question. Once the value is submitted, the visibleIf expression evaluates to true and activates the second question. I may recommend that you change the survey.textUpdateMode from onBlur (default) to onTyping.

        JSON
        { textUpdateMode: "onTyping", pages: [ { name: "singlePage", elements: [ { type: "panel", name: "qbr001Panel", elements: [ { type: "comment", name: "qbr001", title: "Describe something", visibleIf: "" } ] }, { type: "panel", name: "qbr002Panel", elements: [ { type: "radiogroup", name: "qbr002", title: "Do you like cats? ", choices: ["Yes", "No"], visibleIf: "{qbr001} notempty" } ] }, { type: "panel", name: "qbr003Panel", elements: [ { type: "radiogroup", name: "qbr003", title: "Do you like dogs?", choices: ["Yes", "No"], visibleIf: "{qbr002} = 'No'" } ] }, { type: "panel", name: "qbr004Panel", elements: [ { type: "comment", name: "qbr004", title: "Why?", visibleIf: "{qbr002} = 'No' and {qbr003} = 'No'" } ] }, { type: "panel", name: "qbr005Panel", elements: [ { type: "comment", name: "qbr005", title: "Which breed?", visibleIf: "{qbr002} = 'Yes' or {qbr003} = 'Yes'" } ] }, { type: "panel", name: "qbr006Panel", elements: [ { type: "imagepicker", name: "qbr006", title: "choose pictures of dogs", choices: [ { value: "img1", imageLink: "https://images.pexels.com/photos/8386440/pexels-photo-8386440.jpeg?auto=compress&cs=tinysrgb&w=600" }, { value: "img2", imageLink: "https:///..." } ], multiSelect: false, visibleIf: "{qbr003} = 'Yes' and {qbr005} notempty" } ] }, { type: "panel", name: "qbr007Panel", elements: [ { type: "imagepicker", name: "qbr007", title: "choose cats", choices: [ { value: "img1", imageLink: "https://www....." }, { imageLink: "https://i.....", value: "img2" } ], multiSelect: false, visibleIf: "{qbr002} = 'Yes' and {qbr005} notempty" } ] } ] } ] }

        With this option, the second question will appear immediately after a user starts entering some text within the first survey element.
        Clipboard-File-1.png

        Please let me know if this option works.

          Comments (2)

            Hello Jane! This is awesome! Thank you so much!

              You're very welcome, Vic! Please feel free to contact us if you have any questions.