title: How to access elements(inputs, selects) of a dynamic form
body: <p>I am having a dynamic form which creates fields dynamically by pressing "+" button.</p>
  
  <p>This form is not binded in the document but generated when we click the + button.
  I need to access the form values, how do I achieve that.</p>
  
  <p>what should I use form "get" or "post" . </p>
  
  <p>I have tried by using formdata object or jQuery serialize() but with no success or actually I couldn't figure out a way how to use it correctly .</p>
  
  <p>JSFIDDLE <a href="http://jsfiddle.net/3542N/7/" rel="nofollow">LINK</a> :</p>
  
  <p>code:</p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="main1"&gt;
          &lt;input type="button" onclick="addSelectBox ()" name="clickme" value="+" /&gt;
          &lt;input type="button" onclick="removeSelect();" value="-" /&gt;
          &lt;input type="button" onclick="xmlData();" value="XML" /&gt;
      &lt;/div&gt;
      &lt;form id="autoPopulation_form" method='post'&gt;
          &lt;div id="main"&gt;&lt;/div&gt;
          &lt;input type="submit" /&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>JS :</p>
  
  <pre><code>    var selele = 0;
      var brindex = 0;
  
      function addSelectBox() {
  
          selele = selele + 1;
          var spantag = document.createElement("span");
          spantag.setAttribute("id", selele);
  
          var parentDiv = document.getElementById("main");
          var selectElement = document.createElement("select");
          var selectElement1 = document.createElement("select");
          var selectElement2 = document.createElement("select");
          var selectElement3 = document.createElement("select");
          var textbox = document.createElement('input');
          textbox.setAttribute("name", "text" + selele);
  
          var arr = new Array("Stocks", "MutualFunds");
          var arr2 = new Array("individual", "401k", "IRA");
          var arr3 = new Array("contains", "equals");
          var arr4 = new Array("scrapedaccounttype", "scrapedtransactiontype");
  
          for (var i = 0; i &lt; arr.length; i++) {
              var option = new Option(arr[i]);
              selectElement.options[selectElement.options.length] = option;
              selectElement.setAttribute("name", "tag" + selele);
          }
  
  
          for (var i = 0; i &lt; arr2.length; i++) {
              var option = new Option(arr2[i]);
              selectElement1.options[selectElement1.options.length] = option;
              selectElement1.setAttribute("name", "acctType" + selele);
          }
  
          for (var i = 0; i &lt; arr3.length; i++) {
              var option = new Option(arr3[i]);
              selectElement2.options[selectElement2.options.length] = option;
              selectElement2.setAttribute("name", "compare" + selele);
          }
          for (var i = 0; i &lt; arr4.length; i++) {
              var option = new Option(arr4[i]);
              selectElement3.options[selectElement3.options.length] = option;
              selectElement3.setAttribute("name", "match_name" + selele);
          }
  
  
  
          spantag.appendChild(selectElement);
          spantag.appendChild(selectElement1);
          spantag.appendChild(selectElement2);
          spantag.appendChild(selectElement3);
          spantag.appendChild(textbox);
  
  
          parentDiv.appendChild(spantag);
          linebreak();
  
      };
  
      function removeSelect() {
          var parentDiv = document.getElementById("main");
          var removetg = document.getElementById(selele);
          if (selele != 1) {
              parentDiv.removeChild(removetg);
              selele = selele - 1;
  
  
          } else {
              parentDiv.removeChild(removetg);
              parentDiv.innerHTML = "";
              selele = selele - 1;
          }
          removeBreak();
      };
  
      function linebreak() {
  
          brindex = brindex + 1;
          var brtag = document.createElement("br");
          brtag.setAttribute("id", brindex);
          var parentDiv = document.getElementById("main");
          parentDiv.appendChild(brtag);
      };
  
      function linespace() {
  
          var myElement = document.createElement("span");
          myElement.innerHTML = "&amp;nbsp &amp;nbsp &amp;nbsp &amp;nbsp &amp;nbsp &amp;nbsp";
          var parentDiv = document.getElementById("main");
          parentDiv.appendChild(myElement);
      };
  
      function removeBreak() {
          var myElement = document.getElementById(brindex);
          var parentDiv = document.getElementById("main");
          brindex = brindex - 1;
          parentDiv.removeChild(myElement);
      };
  
      function xmlData() {
  
  
          xmlDoc = loadXMLDoc("data.xml");
  
          newel = xmlDoc.createElement("edition");
  
          x = xmlDoc.getElementsByTagName("span")[0];
          x.appendChild(newel);
  
      };
      window.onload = function () {
          $( "autoPopulation_form" ).on( "submit", function( event ) {
    event.preventDefault();
    console.log( $( this ).serialize() );
  });
      };
  </code></pre>