Adding fieldset in the table

[Ashish Sood]

Hi, I added fieldsets and form tag in the table tag, and in the same page i am using Javascript DOM for adding similar element on the page and after clicking on the add button nothing is happen only the blank row is inserted..

  <script>window.onload = function (){    document.getElementById("addButton").onclick = cloneFieldSet;}var counter = 0;function cloneFieldSet (){    counter++;    var theField = document.getElementById("field");    var theClone = theField.cloneNode(true);    var elements = theClone.elements;    for (var el in elements)    {		    elements[el].name += counter.toString();    }    theClone.id += counter.toString();    theField.form.insertBefore(theClone, this);}</script>  <table width="100%" border="1">  <tr>    <th scope="col">sample1</th>    <th scope="col">sample2</th>    <th scope="col">sample3</th>    <th scope="col">sample4</th>  </tr> </table><form action="sample.php" method="post"><table width="100%" border="1"><fieldset id="field" style="border:none; padding:10px; margin:10px;"><tr >    <td width="60"><input type="text" name="sample" />  </td>	           				          <td><select name="sev[]">		    <option value="none0"></option>		    <option value="example1">example 1</option>		    <option value="example2">example 2</option>		    <option value="example3">example 3</option>		    <option value="example4">example 4</option>    </td>	           </select>      <td>  <select name="status[]">		    <option value="##"></option>		    <option value="##">example</option>		    <option value="##">example</option>		    <option value="##">example</option>		    <option value="##">example</option>		    <option value="##">example</option>		    <option value="##">example</option></td>    </select>						      <td><textarea rows="2" cols="30" name="description_tic"></textarea></td></tr></table></fieldset><input type="button" value="Add" id="addButton" /><input type="submit" value="submit" name="submit" /></form>

I want to add filedset into my table, so every columns comes just under the table heading... Thanks

Edited February 20, 2013 by Ashish Sood

[RezaRohani]

The "fieldset" within the "table" before the "tr" and outside the "td" are not allowed (And so it's not logical). And the tree structure is not observed at several places. for example, "fieldset" opened inside "table" and closed outside that or "select" s are opened inside "td" and closed after that...Those that aside, your JavaScript function has some bugs (in my opinion of course...).

{    counter++;    var theField = document.getElementById("field");    var theClone = theField.cloneNode(true);    var elements = theClone.elements; // ".elements" is a "formObject" property, not for elements like fieldset.     for (var el in elements)    {                    elements[el].name += counter.toString();// When u use "element[index]", index must be a int, not an element.                                                            // So if this action be true, with this type of assignment, all elements, have same name. you want this?    }    theClone.id += counter.toString();    theField.form.insertBefore(theClone, this);// You have not any form in your fieldset, but call it!}