title: How to collect values (data) of dynamically added rows (HTML table) ? Using php & XAMPP
body: <p>I created a simple form with a dynamic table. This table rows increment by the user input values, so I need to increment the combo box or the select (option) every time a new row created, so it should be like default combo box values. Note: this select or combo box is part of the column attributes, remember the rows increment, but without the column.</p>
  
  <p>2nd Question: </p>
  
  <p>I want to collect this table columns data or values whatever its rows number is, and store it to XAMPP database using php. I know how to collect data from a single form, but I don't know how to collect data from dynamic form.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>function AddRows()
  {
  var tableelement = document.getElementById("mytable")
  var rows = document.getElementById("noofrows").value;
  var tablerowcount = tableelement.rows.length;
  var currowcount = tablerowcount;
  
  
  for(i = 1; i &lt; rows; i++) {
  
  var row = tableelement.insertRow(currowcount);
  var cellid = row.insertCell(0);
  cellid.innerHTML = "&lt;b&gt;" + currowcount +"&lt;/b&gt;";
  var cellid2 = row.insertCell(1);
  
  
  cellid2.innerHTML = "&lt;input value='' id='" + currowcount +"_name' /&gt; ";
  var cellid3 = row.insertCell(1);
  cellid3.innerHTML = "&lt;input value='' id='" + currowcount +"_name' /&gt; ";
  var cellid4 = row.insertCell(1);
  cellid4.innerHTML = "&lt;input value='' id='" + currowcount +"_name' /&gt; ";
  var cellid5 = row.insertCell(1);
  cellid5.innerHTML = "&lt;input value='' id='" +currowcount +"_name' /&gt; ";
  var cellid6 = row.insertCell(1);
  cellid6.innerHTML = "&lt;input value='' id='" +currowcount+"_name' /&gt; ";
  
  
  var currowcountcurrowcount = currowcount++;
  
  
  }
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form method="post" action="insert.php&gt;
  
  Carton Number :&lt;input type="text" name="cn"&gt; &lt;br&gt;
  Business Unit :&lt;input type="text" name="bu"&gt; &lt;br&gt;
  No of Files  :&lt;input type="noofrows" id="noofrows"  value="1" name="nof" /&gt;
  
  &lt;input name="add" id="add" type="button" value="Add" onClick="AddRows()"/&gt;
  
  
  &lt;table name="mytable" id="mytable" border=1&gt;
      &lt;tr&gt;
          &lt;td&gt;
            &lt;b&gt;SN&lt;/b&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;b&gt;From&lt;/b&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;b&gt;To&lt;/b&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;b&gt;Range&lt;/b&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;b&gt;Document Category&lt;/b&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;b&gt;Document Type&lt;/b&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;
        &lt;b&gt;1&lt;/b&gt;
      &lt;/td&gt;
      &lt;td&gt;
         &lt;input value="" id='1_name' &gt;
      &lt;/b&gt;
  &lt;/td&gt;
  &lt;td&gt;
         &lt;input value="" id='1_name'/&gt;
      &lt;/b&gt;
  &lt;/td&gt;
  &lt;td&gt;
     &lt;input value="" id='1_name' /&gt;
   &lt;/b&gt;
      &lt;/td&gt;
  
    &lt;td&gt;
    &lt;Select id='select' /&gt;
      &lt;option name="option" value="finance"&gt;Finance Documents&lt;/option&gt;
      &lt;option name="option" value="hr"&gt;HR Documents&lt;/option&gt;
      &lt;option name="option" value="test"&gt;test&lt;/option
      &lt;/Select&gt;
    &lt;/b&gt;
      &lt;/td&gt;
      &lt;td&gt;
  
      &lt;Select id='select' /&gt;
         &lt;option name="option" value="CP"&gt;Cash movement&lt;/option&gt;
         &lt;option name="option" value="PV"&gt;Payment Voucher&lt;/option&gt;
         &lt;option name="option" value="RV"&gt;RV&lt;/option
      &lt;/Select&gt;
      &lt;/b&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;br/&gt;
  </code></pre>