surveyjs / survey-library

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
https://surveyjs.io/form-library
MIT License
4.2k stars 810 forks source link

If a page is conditionally shown, you need to click next twice if the condition is satisfied #8472

Closed chapkovski closed 4 months ago

chapkovski commented 4 months ago

Are you requesting a feature, reporting a bug or asking a question?

BUG

What is the current behavior?

If a page is conditionally shown, you need to click next twice if the condition is satisfied

What is the expected behavior?

Page is shown immediately after 'Next' button is clicked IF condition is satisfied

How would you reproduce the current behavior (if this is a bug)?

HERE is the gist with Json: https://gist.github.com/chapkovski/73f15f54dd58ee62ed7f605abc94178c

Specify your

JaneSjs commented 4 months ago

Hello @chapkovski, Thank you for sharing a demo. I tested it and confirmed that if you enter a value less than 300 and move the focus out of the input field to submit the value, the next page appears and the Next button is activated immediately. Please refer to the following demo: View Plunker.

https://github.com/surveyjs/survey-library/assets/22372972/3932d344-a5de-4f80-aedd-a0a9ce7f071d

If you wish to update the page visibility immediately as a user enters the value, change the survey.textUpdateMode from onBlur to onTyping.

const json = {
 "pages": [
  {
   "name": "corruption",
   "elements": [
    {
     "type": "html",
     "name": "intro_to_corruption",
     "html": "Bitte lesen Sie den folgenden Abschnitt erneut: <b> <div class='corrupt_class'><i><p> Nach einer gründlichen Suche in der Datenbank teilt Ihnen die Mitarbeiterin mit, dass es in einem Kindergarten in der Nähe keine freien Plätze gebe. Jeder Kindergarten sei voll und es bestehe die Möglichkeit, Ihr Kind auf eine Warteliste zu setzen. Die Mitarbeiterin sagt Ihnen, dass es ein Jahr dauern kann, bis ein Platz frei wird. <br> Sie deutet jedoch an, dass es einen alternativen Weg geben könne, um das Verfahren zu beschleunigen. Sie könnten sofort einen Platz erhalten, wenn Sie bereit wären, ihr eine kleine Gebühr zu zahlen. </p></i></div> "
    },
    {
     "type": "radiogroup",
     "name": "corruption_bin",
     "title": "Sind Sie bereit, der Sachbearbeiterin eine zusätzliche Gebühr zu zahlen, wenn ja, wie viel sind Sie bereit zu geben?",
     "description": "(Zur Erinnerung: Ihr monatliches Nettoeinkommen in Novaland beträgt 3000 Novas.) ",
     "choices": [
      {
       "value": "0",
       "text": "Nein"
      },
      {
       "value": "1",
       "text": "Ja"
      }
     ]
    },
    {
     "type": "text",
     "name": "corruption_cont",
     "titleLocation": "hidden",
     "inputType": "number",
     "placeholder": "Wie viel sind Sie bereit zu zahlen?"
    }
   ]
  },
  {
   "name": "corruption_followup_page",
   "elements": [
    {
     "type": "html",
     "name": "intro_to_corruption2",
     "html": "Bitte lesen Sie den folgenden Abschnitt erneut: <b> <div class='corrupt_class'><i><p> Nach einer gründlichen Suche in der Datenbank teilt Ihnen die Mitarbeiterin mit, dass es in einem Kindergarten in der Nähe keine freien Plätze gebe. Jeder Kindergarten sei voll und es bestehe die Möglichkeit, Ihr Kind auf eine Warteliste zu setzen. Die Mitarbeiterin sagt Ihnen, dass es ein Jahr dauern kann, bis ein Platz frei wird. <br> Sie deutet jedoch an, dass es einen alternativen Weg geben könne, um das Verfahren zu beschleunigen. Sie könnten sofort einen Platz erhalten, wenn Sie bereit wären, ihr eine kleine Gebühr zu zahlen. </p></i></div> "
    },
    {
     "type": "radiogroup",
     "name": "corruption_insist_bin",
     "title": "Die Sachbearbeiterin sagt, sie benötige mindestens 300 Novas, um den Prozess zu beschleunigen. Sind Sie bereit, 300 Novas zu zahlen?",
     "choices": [
      {
       "value": "1",
       "text": "Ja"
      },
      {
       "value": "0",
       "text": "Nein"
      }
     ]
    }
   ],
   "visibleIf": "{corruption_cont} < 300"
  }
 ],
 "showPrevButton": false,
 "showCompletedPage": false,
 "pageNextText": "Weiter",
 "completeText": "Weiter",
 "textUpdateMode": "onTyping"
}

View Demo

https://github.com/surveyjs/survey-library/assets/22372972/c2d81c77-b712-43a7-8dc2-aadf9c0ade31

Please feel free to update me if you have more questions.