title: Add form fields dynamically with php
body: <p>Referring to this post.  <a href="https://stackoverflow.com/questions/21088544/add-form-fields-dynamically-populated-dropdown-list-with-php">Add form fields dynamically populated dropdown list with php</a>  I have used his code but will modify it to fit my needs since I pretty much nothing about javascript.  I have everything working except when you press the + button it never creates more input boxes.  Any help would be great.</p>
  
  <p>This my php file</p>
  
  <pre><code>&lt;?php
  session_start();
  require_once("dbconfig.php");
  ?&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="addfish.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;form id="form1" name="form1" method="post" action="results.php"&gt;
   &lt;div id="itemRows"&gt;
      &lt;select name="species"&gt;
              &lt;option value=""&gt;Select Species&lt;/option&gt;';
              &lt;?php $stmt = $dbc-&gt;prepare("SELECT species FROM fish");
              $stmt-&gt;execute();
  
  while($speciesq = $stmt-&gt;fetch(PDO::FETCH_ASSOC))
  {
      echo "&lt;option value=\"" . $speciesq['species'] ."\"&gt;" . $speciesq['species'] ."&lt;/option&gt;";
  }
  ?&gt; 
  &lt;/select&gt;
      Number: &lt;input type="text" name="speciesnumber1" size="7" /&gt; Weight: &lt;input type="text" name="speciesweight1" /&gt; &lt;input onClick="addRow(this.form);" type="button" value="+" /&gt;     
      &lt;/div&gt;&lt;/form&gt;
  
  
  &lt;/html&gt;
  </code></pre>
  
  <p>My addfish.js file</p>
  
  <pre><code>var rowNum = 0;
  var ddsel = '&lt;select name="species'+rowNum+'&gt;';
  var ddopt = '&lt;option value=""&gt;Select Species&lt;/option&gt;';
  var ddselc= '&lt;/select&gt;';
  ;
  function addRow(frm) {
      rowNum ++;
      $.post("getlist.php", function(data) {
          var frm = document.getElementById('form1')
          for (var i=0; i&lt;data.length; i++) {
              ddopt += '&lt;option value="'+data[i].value+'"&gt;'+data[i].value+'&lt;/option&gt;';
          } 
          var row = '&lt;p id="rowNum'+rowNum+'"&gt;'+ddsel+ddopt+ddselc+'Number: &lt;input type="text" name="speciesnumber'+rowNum+'" size="7" value="'+frm.speciesnumber1.value+'"&gt; Weight: &lt;input type="text" name="speciesweight'+rowNum+'" value="'+frm.speciesweight.value+'"&gt; &lt;input type="button" value="-" onclick="removeRow('+rowNum+');"&gt;&lt;/p&gt;';
          jQuery('#itemRows').append(row);
          frm.add_qty.value = '';
          frm.add_name.value = '';
      }, "json");
  }
  function removeRow(rnum) {
      jQuery('#rowNum'+rnum).remove();
  }
  </code></pre>
  
  <p>This is my getlist.php</p>
  
  <pre><code>&lt;?php
  session_start();
  include("dbconfig.php");
  $stmt = $dbc-&gt;prepare("SELECT species FROM fish");
  $stmt-&gt;execute();
  $result = array();
  while ($rows = $stmt-&gt;fetch(PDO::FETCH_ASSOC)){
     $result[] = array(
      'value' =&gt; $rows['species'],
      );
  }
  echo json_encode($result);
  ?&gt;
  </code></pre>