title: How to Dynamically create Form elements
body: <p>I need to dynamically create a form when user enter the number of row.</p>
  
  <p>I tried the below code and spent over an hour searching on internet and can't solve that.</p>
  
  <p>I was first of all doing it using PHP and I got stuck along the way, and people on the forum advised me to use Javascript.</p>
  
  <p>I'm now confused !!  Please give me a clue !</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;
    &lt;h3&gt;Assignment 11]&lt;/h3&gt;***********************&lt;/p&gt;
  
  &lt;form action="" method="post"&gt;
    &lt;b&gt;Number of items&lt;/b&gt; (between 1 and 30):
    &lt;input type="number" name="numbItems" min="1" max="30" id="numbItem"&gt; &amp;nbsp&amp;nbsp
    &lt;input name="submit" value="Create" type="submit" id="createItem"&gt;
  &lt;/form&gt;
  
  &lt;script type="text/javascript"&gt;
    //document.getElementById("numbItem").onchange = function() {
    document.getElementById("createItem").onclick = function() {
      var price = document.getElementById("numbItem").value;
      //document.getElementById("demo").innerHTML =  "your model price will be "  +  price ;
      alert(price + " items created.");
    };
  &lt;/script&gt;
  
  &lt;br&gt;=============================================================================&lt;br&gt;&lt;br&gt;
  
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;Item&lt;/td&gt;
      &lt;td&gt;&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbspValue ( R )&lt;/td&gt;
      &lt;td&gt;&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbspTaxes ( R )&lt;/td&gt;
      &lt;td&gt;&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbspVAT ( % )&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;br&gt;=============================================================================&lt;br&gt;&lt;br&gt;
  
  &lt;?php if($numbItems=="1") { ?&gt;
    &lt;form action="" method="post"&gt;
      &lt;input type="text" name="item1" placeholder="E.g.: Gross Salary" /&gt;&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&lt;input type="text" name="value1" placeholder="E.g.: 12000" /&gt;&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp
      &lt;input type="text" name="tax1" value="" readonly style="color:#f00;background:#ccc"&gt;&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&lt;input type="number" name="vat1" min="0" max="100"&gt; &amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp &lt;input name="btnItem1" value="Calculate" type="button"&gt;&lt;br&gt;&lt;br&gt;
    &lt;/form&gt;
  &lt;?php } ?&gt;
  
  &lt;?php if($numbItems=="2") { ?&gt;
    &lt;form action="" method="post"&gt;
      &lt;input type="text" name="item1" placeholder="E.g.: Gross Salary" /&gt;&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&lt;input type="text" name="value1" placeholder="E.g.: 12000" /&gt;&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp
      &lt;input type="text" name="tax1" value="" readonly style="color:#f00;background:#ccc"&gt;&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&lt;input type="number" name="vat1" min="0" max="100"&gt; &amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp &lt;input name="btnItem1" value="Calculate" type="submit"&gt;&lt;br&gt;&lt;br&gt;
      &lt;input type="text" name="item2" placeholder="E.g.: Electricity" /&gt;&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&lt;input type="text" name="value2" placeholder="E.g.: 750" /&gt;&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp
      &lt;input type="text" name="tax2" value="" readonly style="color:#f00;background:#ccc"&gt;&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&lt;input type="number" name="vat2" min="0" max="100"&gt; &amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp &lt;input name="btnItem2" value="Calculate" type="submit"&gt;&lt;br&gt;&lt;br&gt;
      &lt;!-- &lt;input type="submit" value="Submit"&gt; --&gt;
    &lt;/form&gt;
  &lt;?php } ?&gt;</code></pre>
  </div>
  </div>
  </p>