locked
Survey Question Logic RRS feed

  • Question

  • User-1824541736 posted

    Hello, I would like to create a basic survey logic proof of concept on jsbin.com. I would just like to use HTML and JQuery for now (will add in .Net framework later).

    The logic I'm trying to emulate is displaying a text area if the survey question is answered in the negative. For example, the question will be a radio group with 5 selections. If the "Dissatisfied" or "Extremely Dissatisfied" options are selected, I would like a text area to expand/appear just below the question as a required text area. Otherwise, I would like to hide it.

    Example appreciated. Thank you.

    Existing HTML below:

    <html>
    
    <head>
    
    <style>
    #radioGroup .wrap {
      display: inline-block;
    }
    #radioGroup label {
      display: block;
      text-align: center;
      margin: 0 0.2em;
    }
    #radioGroup input[type="radio"] {
      display: block;
      margin: 0.5em auto;
    }
    </style>
    
    <body>
    Example Survey Question
    <br>
    <br>
    How satisfied are you with your pay?
    <br>
    <br>
    
    <div id="radioGroup">
      <div class="wrap">
        <label for="markExtDissatisfied">Extremely Dissatisfied</label>
        <input type="radio" name="mark" id="markExtDissatisfied" value=1 />
      </div>
    
      <div class="wrap">
        <label for="markDissatisfied">Dissatisfied</label>
        <input type="radio" name="mark" id="markDissatisfied" value=2 />
      </div>
      <div class="wrap">
        <label for="markNeutral">Neutral</label>
        <input type="radio" name="mark" id="markNeutral" value=3 />
      </div>
      <div class="wrap">
        <label for="markSatisfied">Satisfied</label>
        <input type="radio" name="mark" id="markSatisfied" value=4 />
      </div>
    <div class="wrap">
        <label for="markExtSatisfied">Extremely Satisfied</label>
        <input type="radio" name="mark" id="markExtSatisfied" value=5 />
      </div>
    </div>
    
    <br>
    <textarea rows="4" cols="50">
    Please explain here.....
    </textarea>
    
    </body>
    </html>
    
    
    

    Thursday, October 6, 2016 8:40 PM

Answers

  • User438705957 posted

    Scotland06,

    In your css file, set the default display of the textarea element to none. You will have to give it an id or class to do this.

    Then add some jQuery to detect a change in the radio buttons group ( you have grouped them by giving them a name of 'mark').
    You are selecting by attribute value in this case.
    Then if a whinger selected  "Dissatisfied" or "Extremely Dissatisfied" , select your textarea and set the display to block.

    $('input[name=mark]').on('change', function () {
        var $option = ($('input[name=mark]:checked').val());
        if ($option == 1 || $option == 2) {
            $('#textAreaID').css('display', 'none'); 
    alert ("Whinger Detected. You hard drive will now be wiped");
    } });



     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 7, 2016 2:17 AM
  • User1213248666 posted

    Hi Scot,

    Please do the changes in your code

    <div id="radioGroup" onchange="return loadTextArea()>
    <textarea id="Txtarea" rows="4" cols="50" style="display:none;">
    <script>
    function loadTextarea()
    {
    var value = $("form input[type='radio']:checked").val();
    if(value==1 || value==2)
    {
    $("#Txtarea").show();
    }

    }
    </script>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 7, 2016 4:03 AM
  • User2053451246 posted

    "ReferenceError: $ is not defined

    You haven't referenced the jQuery script in your page.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 7, 2016 9:42 PM

All replies

  • User438705957 posted

    Scotland06,

    In your css file, set the default display of the textarea element to none. You will have to give it an id or class to do this.

    Then add some jQuery to detect a change in the radio buttons group ( you have grouped them by giving them a name of 'mark').
    You are selecting by attribute value in this case.
    Then if a whinger selected  "Dissatisfied" or "Extremely Dissatisfied" , select your textarea and set the display to block.

    $('input[name=mark]').on('change', function () {
        var $option = ($('input[name=mark]:checked').val());
        if ($option == 1 || $option == 2) {
            $('#textAreaID').css('display', 'none'); 
    alert ("Whinger Detected. You hard drive will now be wiped");
    } });



     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 7, 2016 2:17 AM
  • User1213248666 posted

    Hi Scot,

    Please do the changes in your code

    <div id="radioGroup" onchange="return loadTextArea()>
    <textarea id="Txtarea" rows="4" cols="50" style="display:none;">
    <script>
    function loadTextarea()
    {
    var value = $("form input[type='radio']:checked").val();
    if(value==1 || value==2)
    {
    $("#Txtarea").show();
    }

    }
    </script>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 7, 2016 4:03 AM
  • User-1824541736 posted

    Hello Sangit and Madog, 

    Thank you Sangit, but I'm getting this error in the JSBin console:

    "ReferenceError: $ is not defined
    at loadTextArea (<anonymous>:4:16)
    at HTMLDivElement.onchange (https://null.jsbin.com/runner:1:957)"

    Current code here:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      
      <script>
    function loadTextArea()
    { 
       var value = $("form input[type='radio']:checked").val();
         if(value==1 || value==2)
           {
              $("#Txtarea").show();
           }
    
    }
    </script>
      
      <style>
    #radioGroup .wrap {
      display: inline-block;
    }
    #radioGroup label {
      display: block;
      text-align: center;
      margin: 0 0.2em;
    }
    #radioGroup input[type="radio"] {
      display: block;
      margin: 0.5em auto;
    }
    </style>
    </head>
    <body>
    Example Survey Question
    <br>
    <br>
    How satisfied are you with your pay?
    <br>
    <br>
    
    <div id="radioGroup" onchange="return loadTextArea()">
      <div class="wrap">
        <label for="markExtDissatisfied">Extremely Dissatisfied</label>
        <input type="radio" name="mark" id="markExtDissatisfied" value=1 />
      </div>
    
      <div class="wrap">
        <label for="markDissatisfied">Dissatisfied</label>
        <input type="radio" name="mark" id="markDissatisfied" value=2 />
      </div>
      <div class="wrap">
        <label for="markNeutral">Neutral</label>
        <input type="radio" name="mark" id="markNeutral" value=3 />
      </div>
      <div class="wrap">
        <label for="markSatisfied">Satisfied</label>
        <input type="radio" name="mark" id="markSatisfied" value=4 />
      </div>
    <div class="wrap">
        <label for="markExtSatisfied">Extremely Satisfied</label>
        <input type="radio" name="mark" id="markExtSatisfied" value=5 />
      </div>
    </div>
    
    <br>
    <textarea id="Txtarea" rows="4" cols="50" style="display:none;">
    Please explain here.....
    </textarea>
    </body>
    </html>

    Help appreciated. 

    Friday, October 7, 2016 4:48 PM
  • User2053451246 posted

    "ReferenceError: $ is not defined

    You haven't referenced the jQuery script in your page.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 7, 2016 9:42 PM
  • User-1824541736 posted


    How embarrassing. Thanks everybody. Had to put my form tag in there too. Works like a champ!

    Tuesday, October 18, 2016 11:25 PM