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.12k stars 802 forks source link

Add "Don't know" to Single line input #7929

Closed sinnbeck closed 3 months ago

sinnbeck commented 7 months ago

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

Asking a question

What is the current behavior?

Single line input does not have options

What is the expected behavior?

Often we have questions that might not be known to the respondent. For instance "How many employees are in your company". It would be nice to have an option for them to just click "Don't know" instead of leaving the input empty as this will require a help text for every question.

Another option would be to swap "Other" and "Dont know" to use "Other" as a regular text input

JaneSjs commented 7 months ago

Hello @sinnbeck, A Single-Line Text input field is an open-ended question. It allow respondents to enter a value. If you wish to display additional predefined items for a single-line input, use the dataList property.

Alternatively, you can use a Radiogroup question type and enable the Other and Don't Know options. Consider the following demo: View Plunker.

{
 "logoPosition": "right",
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "radiogroup",
     "name": "question1",
     "title": "How many employees are in your company",
     "choices": [
      {
       "value": "Item 1",
       "text": "1-10"
      },
      {
       "value": "Item 2",
       "text": "10-30"
      },
      {
       "value": "Item 3",
       "text": "> 30"
      }
     ],
     "showOtherItem": true,
     "otherText": "Other (specify)",
     "showDontKnowItem": true
    }
   ]
  }
 ]
}

image Let me know if this configuration may suit you.

sinnbeck commented 7 months ago

You are probably correct in the assumption that I should just use a simple radio with choices instead.

But another scenario. How about if I have fields to input name, email etc. And I want a choice to say "I would prefer not to answer" which would disable the other fields? Could I perhaps use a panel in some way? If I just add a checkbox input with only "reject to answer" I dont seem to be able to deselect it again

image

JaneSjs commented 3 months ago

Hello @sinnbeck, Please accept my apologies for the delayed reply. To disable and reset values of certain input fields if a respondent ticks a Refuse to Answer flag, you can use survey logic for the enabledIf and resetValueIf question settings. Consider the following demo:

{
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "panel",
     "name": "panel1",
     "elements": [
      {
       "type": "text",
       "name": "userName",
       "title": "Name",
       "enableIf": "{refuseToAnswer} empty or {refuseToAnswer} = false",
       "resetValueIf": "{refuseToAnswer} = true"
      },
      {
       "type": "text",
       "name": "email",
       "title": "Email",
       "enableIf": "{refuseToAnswer} empty or {refuseToAnswer} = false",
       "resetValueIf": "{refuseToAnswer} = true",
       "inputType": "email"
      },
      {
       "type": "boolean",
       "name": "refuseToAnswer",
       "title": "I prefer not to answer",
       "renderAs": "checkbox"
      }
     ],
     "title": "User Info",
     "showQuestionNumbers": "off"
    }
   ]
  }
 ]
}

Tip: instead of using Checkboxes, add a Boolean question with "renderAs": "checkbox". In this case, respondents will be able to uncheck a box.

https://github.com/surveyjs/survey-library/assets/22372972/26c69588-5d48-4a13-86f1-e560d27ef1e3

Please feel free to reopen this thread if you have more questions.

Thanks