title: Dynamic Form Builder
body: <p>Main goal: I would like to create a dynamic form-building tool that allows the user to select certain options that, when chosen, enable subsequent inputs to occur.</p>
  
  <p>An example of what I am describing:</p>
  
  <ol>
  <li>Text Entry: Put in a Chapter Name.
  <ul>
  <li>Choose to add question
  <ul>
  <li>Choose Question type (mult. choice, check box, etc.)</li>
  <li>Type in question.</li>
  </ul></li>
  <li>Choose to add new question. If so, repeat ques. steps.</li>
  </ul></li>
  <li>Choose to add new Chapter. If so, repeat add ques. options.</li>
  <li>Submit whole content from above, and export (with the ultimate goal of being parsed/prepared into format for use, as per these <a href="https://docs.google.com/document/d/16eu77sD42xNRFZ8vJ2thhRhJiVp_Og-d3y6OzbYN1Os/pub#h.6gy361zihp1d" rel="nofollow">guidelines</a> (but that's for much later).</li>
  </ol>
  
  <p>Example of what I have done so far: <a href="http://jsfiddle.net/kuanb/aPFXL/" rel="nofollow">JS Fiddle</a>
  Note: Example is incomplete. Stopped because I realize I am building a mess and assume there is an easier/better way to do this.</p>
  
  <p>Thanks in advance for any assistance that can be offered - I hope I was clear!
  Kuan</p>
  
  <p>Caveat: I am relatively new to programming/etc. That said, I feel I have searched quite a bit and there appears to be not much in regards to this specifically (the difficulty being primarily the nested nature of the questions, within the chapters).</p>
  
  <p>JS Fiddle code:</p>
  
  <pre><code>&lt;title&gt;Dynamically build FT survey&lt;/title&gt;
  
  &lt;script language="javascript"&gt;
  
  function addChap(name) {
  
      var element = document.createElement("li");
      element.innerHTML = name;
  
      var foo = document.getElementById("currentChapList");
  
      //Append the element in page (in span).
      foo.appendChild(element);
  
      // Update drop down select lists
      updateSelect();
  }
  
  function delChap() {
  
      var foo = document.getElementById("currentChapList");
      var allChildNodes = foo.childNodes;
      var lastElem = allChildNodes.length - 1;
  
      foo.removeChild(allChildNodes[lastElem]);
  
      // Update drop down select lists
      updateSelect();
  
  }
  
  function updateSelect() {
  
      // First delete everything in the Chapter selection list
      var currentChaps = document.getElementById("chapOptions");
      var newFoo = document.getElementById("currentChapList");
  
      for (i = 0; i &lt; currentChaps.children.length; i++) { 
          currentChaps.remove(currentChaps.children[i]);
      }
  
      // Then re-add the remaining components from Chapter list
      for (i = 0; i &lt; newFoo.children.length; i++) { 
          nfCont = newFoo.children[i].innerHTML;
          nfElem = document.createElement("option");
          nfElem.innerHTML = nfCont;
          currentChaps.appendChild(nfElem);
      }
  }
  
  function addAns() { 
  
      //Create an input type dynamically.
      var element = document.createElement("input");
      var foo = document.getElementById("lastAns");
  
      foo.appendChild(element);
  
  }
  
  function addQues() {
      var allQues = document.getElementById("questionSubSect");
      var newQues = document.createElement("div");
      newQues.innerHTML = allQues.innerHTML;
  
      //Append the element in page (in span).
      allQues.appendChild(newQues);
  }
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;b&gt;Current Chapter Index&lt;/b&gt;
  &lt;br&gt;
  &lt;ol id="currentChapList"&gt;
  &lt;/ol&gt;
  &lt;input type="text" style="width:400px" value="Enter Chapter Name" id="newChapName"/&gt;&lt;br&gt;
  &lt;input type="button" value="Add Chapter" onclick="addChap(newChapName.value)"/&gt;
  &lt;input type="button" value="Delete Last Chapter" onclick="delChap()"/&gt;
  &lt;br&gt;
  
  &lt;br&gt;
  &lt;b&gt;Dynamically add element in form.&lt;/b&gt;
  &lt;br&gt;
  Select the element and hit Add to add it in form.
  &lt;br&gt;
  
  &lt;br&gt;
  &lt;b&gt;Chapter Builder&lt;/b&gt;
  &lt;br&gt;
  
  &lt;form&gt;
  Chapter Select:
  &lt;select id="chapOptions"&gt;&lt;/select&gt;
  &lt;br&gt;
  
  &lt;div id="questionSubSect"&gt;
  &lt;br&gt;
  Question ID:
  &lt;input type="text" style="width:400px" value="Enter Question"/&gt;
  &lt;br&gt;
  
  Question:
  &lt;input type="text" style="width:400px" value="Enter Question"/&gt;
  &lt;br&gt;
  
  Question Type:
  &lt;select name="element"&gt;
      &lt;option value="text"&gt;Checkbox&lt;/option&gt;
      &lt;option value="text"&gt;Multiple Choice&lt;/option&gt;
      &lt;option value="text"&gt;Open Text&lt;/option&gt;
      &lt;option value="number"&gt;Open Number&lt;/option&gt;
      &lt;option value="text"&gt;Ordered List&lt;/option&gt;
      &lt;option value="image"&gt;Picture&lt;/option&gt;
      &lt;option value="text"&gt;True or False&lt;/option&gt;
  &lt;/select&gt;
  &lt;br&gt;
  
  Other open answer option:
  &lt;select name="element"&gt;
      &lt;option value="text"&gt;False&lt;/option&gt;
      &lt;option value="text"&gt;True&lt;/option&gt;
  &lt;/select&gt;
  &lt;br&gt;
  
  &lt;br&gt;
  &lt;span id="lastAns"&gt;&lt;/span&gt;
  &lt;br&gt;
  &lt;input type="button" value="Add Answer Option" onclick="addAns()"/&gt;
  &lt;br&gt;
  
  &lt;br&gt;
  &lt;/div&gt;
  &lt;span id="lastQues"&gt;&lt;/span&gt; 
  
  &lt;input type="button" value="Add New Question" onclick="addQues()"/&gt;
  
  &lt;/form&gt;
  
  &lt;/body&gt;
  </code></pre>