Show text box for comments if selecting anything lower than 3 on a likert 1-5 scale

Question

I am trying to create a survey with a 1-5 scale option. I want to have javascript show a textbox for comments if a user selection a value of 1-3. Could anyone help me with the javascript code to do so?

Here is my code:

<li>
  <span class="survey-question">How would you rate your experience with online shopping?</span>
  <div class="survey-answer">
    <label>
          <input class="radio-button" type="radio" name="required" value="1"> Horrible
        </label>
    <label>
        <input class="radio-button" type="radio" name="required" value="2"> Bad
        </label>
    <label>
          <input class="radio-button" type="radio" name="required" value="3"> So-So
        </label>
    <label>
          <input class="radio-button" type="radio" name="required" value="4"> Great
        </label>
    <label>
          <input class="radio-button" type="radio" name="required" value="5" checked> Awesome!
        </label>
  </div>


  <!-- If an answer <= "So-So or less", display: -->
  <div id="improvement" class="new">
    <span class="survey-question">How can we improve?</span>
    <textarea class="col-md-10" rows="3" id="answer" placeholder="Comments..."></textarea>
  </div>
</li>

Stackoverflow is a community to ask questions and not request for code. It will be nice for you to show us some javascript code you have tried in your question! — Shi Wei, Jan 28 '20 at 16:00
Hey I tried this code but it seems to affect other questions on the list, unless there is a way to create an array for each question? — Ekin, Jan 28 '20 at 18:30

Kyle · Accepted Answer · 2020-01-28T19:21:18.070

Just need to wire up a change listener, then show hide based on your condition (I included JQuery just for ease, but you could use vanilla, no problem):

Based on your comments, I've updated the code snippet to handle multiple questions. I had to remove the "id" field so you didn't have duplicate identifiers, and I targeted the textbox via the ".new" class - while that works for the example, it's a bit rigid using the .parent().parent() - but it's enough to get you on your way. Also, you have to give the "name" field of the radio buttons a different identifier per group.

$(".new").hide();
$("input").on("change",handleChange);
function handleChange(e){
    var rating = $(e.currentTarget).val();
    var $_textBox = $(e.currentTarget).parent().parent().next(".new");
    if(rating < 4 && $_textBox){
        $_textBox.show();
    }else{
        $_textBox.hide();
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
  <span class="survey-question">QUESTION 1: How would you rate your experience with online shopping?</span>
  <div class="survey-answer">
    <label>
          <input class="radio-button" type="radio" name="required" value="1"> Horrible
        </label>
    <label>
        <input class="radio-button" type="radio" name="required" value="2"> Bad
        </label>
    <label>
          <input class="radio-button" type="radio" name="required" value="3"> So-So
        </label>
    <label>
          <input class="radio-button" type="radio" name="required" value="4"> Great
        </label>
    <label>
          <input class="radio-button" type="radio" name="required" value="5" checked> Awesome!
        </label>
  </div>


  <!-- If an answer <= "So-So or less", display: -->
  <div class="new">
    <span class="survey-question">How can we improve?</span>
    <textarea class="col-md-10" rows="3" id="answer" placeholder="Comments..."></textarea>
  </div>
</li>
<br>
<li>
  <span class="survey-question">QUESTION 2: How would you rate your experience with online shopping?</span>
  <div class="survey-answer">
    <label>
          <input class="radio-button" type="radio" name="required2" value="1"> Horrible
        </label>
    <label>
        <input class="radio-button" type="radio" name="required2" value="2"> Bad
        </label>
    <label>
          <input class="radio-button" type="radio" name="required2" value="3"> So-So
        </label>
    <label>
          <input class="radio-button" type="radio" name="required2" value="4"> Great
        </label>
    <label>
          <input class="radio-button" type="radio" name="required2" value="5" checked> Awesome!
        </label>
  </div>


  <!-- If an answer <= "So-So or less", display: -->
  <div class="new">
    <span class="survey-question">How can we improve?</span>
    <textarea class="col-md-10" rows="3" id="answer" placeholder="Comments..."></textarea>
  </div>
</li>

This works but if I add a 2nd question in, it shares the same textbox or so. (Showing textbox questions 1 also shows it on question 2). Is it because I need to list an array for improvement? If so, how can I do that? "#improvement', "#improvement2", etc? I tried that and it didn't work — Ekin, Jan 28 '20 at 18:17
if they all share the same text box, then you must only be showing the questions 1 at a time - is there a function you call to go to the next question? If so, you would add the: $("#improvement").hide(); to it, to 'reset' the text box. — Kyle, Jan 28 '20 at 18:29
I just have all the questions in a ordered list. It's suppose to hided the textbox on all questions unless they choose 1-3 on each question. Each question will have it's own textbox to show for comment if selected anything from 1-3. — Ekin, Jan 28 '20 at 18:43

score 0 · Answer 2 · answered Jan 28 '20 at 16:17

Use onchange event onchange="getRating(this)" in order to catch the selection from radio inputs and get value from it. If the value is 1, 2 or 3, the improvement section will appear:

var feedbackElem = document.getElementById("improvement")
if (el.value == 3 || el.value == 2 || el.value == 1) { 
  //display improvement}
else { 
  //hide it 
}

function init() {
  var feedbackElem = document.getElementById("improvement")
  feedbackElem.style.display = "none"
}

init ();

function getRating(el) {
  var feedbackElem = document.getElementById("improvement")
  if (el.value == 3 || el.value == 2 || el.value == 1) {
    feedbackElem.style.display = "block"
  } else {
    feedbackElem.style.display = "none"
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
  <span class="survey-question">How would you rate your experience with online shopping?</span>

  <div class="survey-answer">
    <label> 
      <input class="radio-button" type="radio" name="required" value="1" onchange="getRating(this)"> Horrible </label>

    <label> 
      <input class="radio-button" type="radio" name="required" value="2"onchange="getRating(this)"> Bad  </label>

    <label> 
      <input class="radio-button" type="radio" name="required" value="3"onchange="getRating(this)"> So-So  </label>

    <label> 
      <input class="radio-button" type="radio" name="required" value="4"onchange="getRating(this)"> Great </label>

    <label>
    <input class="radio-button" type="radio" name="required" value="5" checked  checkedonchange="getRating(this)"> Awesome! </label>

  </div>


  <!-- If an answer <= "So-So or less", display: -->
  <div id="improvement" class="new">
    <span class="survey-question">How can we improve?</span>
    <textarea class="col-md-10" rows="3" id="answer" placeholder="Comments..."></textarea>
  </div>

</li>

Show text box for comments if selecting anything lower than 3 on a likert 1-5 scale

2 Answers2