title: Inserting Row Into HTML Table within a FORM using Javascript
body: <p>I am trying to add a row to a table that is located in a form using javascript.  The code works when is it is outside of the &lt;<em>form</em>> tags, but once the code is surrounded by &lt;<em>form</em>>, added rows will popup for a few milli seconds and then disappear. </p>
  
  <p>The attached code was tested on Firefox and Mozilla with the same results.  If I remove the &lt;<em>form</em>> tags, the code works fine.   Any ideal on why &lt;<em>form</em>> tags is causing a reload and making the added rows to disappear?</p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"&gt;   &lt;/script&gt;
  
  &lt;script&gt;
  function addTableRow() {
  
      var len = $('#vendorstbl tr').length
      var table = document.getElementById("vendorstbl");
      var row = table.insertRow(len);
      var cell0 = row.insertCell(0);
      var cell1 = row.insertCell(1);
      cell0.innerHTML = "&lt;select id='test"+len+"'&gt;&lt;option name='test"+len+"'&gt;Apple&lt;/option&gt;&lt;option name='test"+len+"''&gt;Sony&lt;/option&gt;&lt;/select&gt;";
      cell1.innerHTML = "&lt;input type='text' size='25' id='product"+len+"' name='product"+len+"'' value='Enter Data'&gt;";
  }
  &lt;/script&gt;
  
  &lt;html&gt;
  &lt;body&gt;
      &lt;h3&gt;Adding Row To Table Test:&lt;/h3&gt;
  
      &lt;form&gt;
          &lt;table class='add' id='vendorstbl'&gt;
          &lt;tr&gt;&lt;th&gt;Vendor&lt;/th&gt;&lt;th&gt;Product&lt;/th&gt;&lt;/tr&gt;
          &lt;/table&gt;
          &lt;button onclick='addTableRow()'&gt;Add Row&lt;/button&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>