Reset button for JavaScript generated rows

[LittleSmilingMonster]

Hello there!!!

 

I am taking my first steps into php and html code and i am facing a problem. I am making a form in order for the user to create a new category in my page but i don't know how many Attributes the category will have. So i made a field for the Attribute followed by a radio tha chooses if the Attribute is measurable or unmeasurable. After that I have set a Button in order to regenerate it with JavaScript as many times as necessary.

 

this is the html code:

<form name="Create Category" align="center" action="Assets/register_test.php" method="post">
  <table style="margin-left: 40%;" id="Attributes">
    <tr> <h2 align="center">Attributes</h2> </tr>
    <tr class="feed" align="left"> 
      <td> <input style="margin-top: 3px;" type="text" name="Attribute" size="30"> <br/>
         <form align="center">
           <input type="radio" name="var" value="measurable" /> measurable
           <input type="radio" name="var" value="unmeasurable" /> unmeasurable
         </form>
       </td> 
    </tr>	
  </table> 
  <div id="attr" style="display:none">  
      <div class="feed">  
        <input type="text" name="Attribute[]" value=""  size="30">  
          <form>
            <input type="radio" name="var" value="measurable" /> measurable
            <input type="radio" name="var" value="unmeasurable" /> unmeasurable
          </form>
      </div>  
  </div>  
  <a style="height: 25px; margin-left:48%; margin-top: 20px;" href="javascript:add_feed()">Add New </a>   
  <input style="height: 25px; margin-left:48%; margin-top: 20px;" type="submit" value="Submit" onclick="validateFields()">
  <input style="height: 25px; margin-left:48%; margin-top: 20px;" type="reset" value="Reset"> <br/>
</form>

 

this is my JavaScript:

 

function add_feed()  
{  
    var div1 = document.createElement('div');  
  
    // Get template data  
    div1.innerHTML = document.getElementById('attr').innerHTML;  
  
    // append to our form, so that template data  
    //become part of form  
    document.getElementById('Attributes').appendChild(div1);  
  
}  

 

The problem is the Reset button. When i hit the Reset button everything gets erased in all the text-inputs But the radios (except the first one) don't.

 

Is there is anyone who can help please?

[spiderwell]

this should be in the javascript section really...

but it looks like the appended fields also have their own form tags, which makes them seperate forms ergo wont be affected by the reset button from the original form