delete javascript generated form fields

[LittleSmilingMonster]

Hello there!!! I am having a problem in my java script!!

 

I have made a javascript in order for the user to dynamically generate fields in a form of my site and i want to put a Delete button in every one of them so they can be deleted if not needed afterwards. But i dont know how to do the script.

 

my script is this one

 

 

function add_feed()  
{  
    var div1 = document.createElement('div');  
    div1.innerHTML = document.getElementById('attr').innerHTML;  
  
    document.getElementById('Attributes').appendChild(div1);  
}  

 

and the form is this one

 

		<div id='category'>
	<form name="Create Category" align="center" action="Assets/register_test.php" method="post">
		<table style="margin-left: 38%;"  id="Category">	
			<tr> <h1 align="center">Create Category</h1> </tr>
			<tr align="right"> 
				<td> Name: </td> 
				<td> <input style="margin-top: 3px;" type="text" name="username" size="30"> </td> 
			</tr>
			<tr align="right"> 
				<td>owner: </td>
				<td> <input style="margin-top: 3px;" type="password" name="password" size="30" > </td> 
			</tr>
		</table>
		<tr> <h2 align="center">Attributes</h2> </tr>
		<table style="margin-left: 40%;" id="Attributes">
			<tr class="feed" align="left"> 
				<td> <input style="margin-top: 3px;" type="text" name="Attribute" id ="Attribute" size="30"> <br/>
					<form align="center">
						<input type="radio" name="value" value="measurable" /> measurable
						<input type="radio" name="value" value="unmeasurable" /> unmeasurable
					</form>
				</td> 
			</tr>	
		</table> 
		<div id="attr" style="display:none">  
			<div class="feed" id="feed">  
				<input type="text" name="Attribute" id ="Attribute" value=""  size="30">  
				<form>
				<input type="radio" name="value" value="measurable" /> measurable
				<input type="radio" name="value" value="unmeasurable" /> unmeasurable
				<a style="height: 25px; margin-left:48%; margin-top: 20px;" href="javascript:de_feed()">Delete </a>  
				</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>		

	</div>

 

[Psycho]

Ok, first off you need to change the field names to be arrays. Otherwise, if you recreate the fields with the exact same name you will only receive the values from the last set of fields. Just add "[]" to the end of the field names. But, because you are using a hidden set of fields to duplicate the field sets you will always have that empty set sicne the user would never see them to be able to enter data.

 

Secondly, to Delete a field set you will need to have some way to reference the container div in order for the delete operation to reference. You could give each DIV a unique ID or you could pass a reference to the Delete link and then traverse up through the parents to the container DIV.

 

Personally, I think that is all a pain in the a**. A question you should ask yourself is if there is any real value in allowing the user to add an unlimited number of field sets. Is there some realistic maximum number that you would expect a user would really need? Let's say you think a user would only ever need to add 15 attributes at most. A simpler solution would be to create the form with 20 field sets with 19 of them hidden. Then allow a user to Add/Delete field sets which would display/hide those field sets.

 

ALSO: Your "forms" are invalid and you would not receive proper data anyway. You have forms within forms.