title: creating a survey form using javascript
body: <p>I have a project where I need to be able to make a survey form. I tried to sort of imitate the way google forms work, wherein initially only an input box for the title of the survey appears, along with an "add question" button provided at the bottom of it.</p>
  
  <p>When the "add question" button is clicked, an input box wherein the question needs to be entered will appear. Then below the input box for the question, three radioboxes will appear labelled as radio box, check box, and text. This is for choosing what the choice types for the questions are. Radio box is for multiple choice type questions, check box is for questions with multiple answers, and text is for questions that don't have choices.</p>
  
  <p>Upon clicking either radiobox or checkbox, two input boxes will appear for the choices. There will also be a button called "add choices" under the last choice input box if the survey creator wishes to add more choices for the form. If the text option is clicked, however, the input box for the choices should not appear (or if in the case that radiobox or checkbox were initially chosen, the input boxes for the choices should disappear).</p>
  
  <p>My problem though is that if I click radiobox/checkbox option for the first few questions and then choose text for the next question, the input boxes for choices still appear for the text box when it's not supposed to. In the case that I chose text in the first few questions, although the choices don't appear at first, when the time comes that I choose either radiobox or checkbox, input boxes for choices appear underneath the previous questions where the selected answer type is text when they previously weren't there.</p>
  
  <p>Here's the html part of the code:</p>
  
  <pre><code>&lt;div class="container" style="margin-top: 5%"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;div class="panel panel-default"&gt;
                      &lt;div class="panel-heading"&gt;Create New Survey:&lt;/div&gt;
                          &lt;div class="panel-group"&gt;
                              &lt;form action="&lt;?php $_SERVER['PHP_SELF']; ?&gt;" method="POST" class="form-control" style="height: 700px; border: none" id="survey-form"&gt;
                                  &lt;label&gt;Survey Title: &lt;/label&gt;
                                      &lt;input name="survey_title" id="survey_title" type="text" class="form-control input-group"/&gt;
                                      &lt;input name="qnum" id="qnum" type="hidden" value=""/&gt;
                                      &lt;input name="choicenum" id="choicenum" type="hidden" value=""/&gt;
                                  &lt;label&gt;Survey Questions:&lt;/label&gt;
                                  &lt;div id="questions"&gt;
                                  &lt;/div&gt;
                                  &lt;button class="btn btn-primary" type="button"style="display: block; margin-top: 5px;" id="addq"&gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;Add a question&lt;/button&gt;
                                      &lt;button class="btn btn-success" type="submit" id="uploadsurvey" name="uploadsurvey" style="display: block; margin-top: 10px"&gt;Upload Survey&lt;/button&gt;
                              &lt;/form&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>This is the js part:</p>
  
  <pre><code>    $(document).ready(function(){
      var i=0;
      var numOfQuestions=0;
      var choice_c = 1;
      $("#addq").click(function(){
              numOfQuestions++;
              i++;
              $("#questions").append("&lt;div id='newq' style='margin-top: 5px; margin-bottom: 5px'&gt;&lt;/div&gt;");
              $("#newq").append("Question: &lt;input type='text' name='q"+i+"' class='form-control' style='display: inline-block' id='q"+i+"'/&gt;");
              $("#qnum").attr("value", numOfQuestions);
              $("#newq").append("&lt;label&gt;&lt;input type='radio' name='radio"+i+"' value='radio' class='choices radiobox' id='radiobox"+i+"'/&gt;&amp;nbsp;Radiobox&amp;nbsp;&amp;nbsp;&lt;/label&gt;");
              $("#newq").append("&lt;label&gt;&lt;input type='radio' name='radio"+i+"' value='check' class='choices checkbox' id='checkbox"+i+"'/&gt;&amp;nbsp;Checkbox&amp;nbsp;&amp;nbsp;&lt;/label&gt;");
              $("#newq").append("&lt;label&gt;&lt;input type='radio' name='radio"+i+"' value='text' class='choices textbox' id='textbox"+i+"'/&gt;&amp;nbsp;Text&amp;nbsp;&amp;nbsp;&lt;/label&gt;");
              $("#newq").append("&lt;input type='text' class='form-control qchoice' name='radiochoice"+choice_c+"_q"+i+"' id='radiochoice"+choice_c+"' title='q"+i+"' style='display: none'/&gt;");
              choice_c++;
              $("#newq").append("&lt;input type='text' class='form-control qchoice' name='radiochoice"+choice_c+"_q"+i+"' id='radiochoice"+choice_c+"' title='q"+i+"' style='display: none'/&gt;");
              choice_c++;
              $("#newq").append("&lt;button id='radiobtn"+i+"' type='button' class='btn btn-primary add-radio-choice' style='display: none'&gt;&lt;span class='glyphicon glyphicon-plus'&gt;&lt;/span&gt;Add choices&lt;/button&gt;");
              $("#newq").append("&lt;button id='checkbtn"+i+"' type='button' class='btn btn-primary add-checkbox-choice' style='display: none'&gt;&lt;span class='glyphicon glyphicon-plus'&gt;&lt;/span&gt;Add choices&lt;/button&gt;");
          });
          $(document.body).on('change', '.choices' ,function() {
              if ($(".radiobox").is(":checked")) {
                  $(".add-radio-choice").show();
                  $(".qchoice").show();
                  $(".add-checkbox-choice").hide();
              }
              else if ($(".checkbox").is(":checked")) {
                  $(".add-checkbox-choice").show();
                  $(".add-radio-choice").hide();
                  $(".qchoice").show();
              }
              else if($(".textbox").is(":checked")){
                  $(".add-checkbox-choice").hide();
                  $(".add-radio-choice").hide();
                  $(".qchoice").hide();
              }
          });
          $(document.body).on('click', '.add-radio-choice' ,function(){
              $("#newq").append("Choice: &lt;input type='text' name='radiochoice"+choice_c+"_q"+i+"' title='q"+i+"' class='form-control qchoice' id='radiochoice"+choice_c+"'/&gt;");
              $("#choicenum").attr("value", choice_c);
          });
          $(document.body).on('click', '.add-checkbox-choice' ,function(){
              $("#newq").append("&lt;input type='text' name='radiochoice"+choice_c+"_q"+i+"' title='q"+i+"' class='form-control qchoice' id='checkboxchoice"+choice_c+"'&gt;");
              $("#choicenum").attr("value", choice_c);
          });
  });
  </code></pre>
  
  <p>I also added a fiddle for this one <a href="https://jsfiddle.net/xjm_/yaL9wdrw/" rel="nofollow noreferrer">here</a>:</p>
  
  <p>I'm also supposed to add an option for dynamically deleting choices and questions in the form, but I don't know how to work around it yet...</p>