17
rated 0 times
[
22]
[
5]
/ answers: 1 / hits: 26543
/ 11 Years ago, thu, august 22, 2013, 12:00:00
I want to dynamically remove form elements using javascript.
The code below is simple and dynamically adds form elements.
My form looks like (sorry, tried to get it working in jsfiddle but couldn't. Definitely works on my own servers though):
first name last name age
Add more data (button) Submit (button)
If you click on Add more data you get
first name last name age
first name last name age remove (button)
Add more data (button) Submit (button)
I record every new row via fooID+x+i.
Eg the first time you add form element first name would be referenced as foo10, last name will be foo11 and so forth.
How do I fix the below to dynamically remove form elements that are being clicked on to be removed?
<script language=javascript>
function removeRow(r)
{
/*********************
Need code in here
*********************/
}
</script>
var x = 1;
function add() {
var fooId = foo;
for (i=1; i<=3; i++)
{
//Create an input type dynamically.
var element = document.createElement(input);
//Assign different attributes to the element.
element.setAttribute(type, fooId+x+i);
element.setAttribute(name, fooId+x+i);
element.setAttribute(id, fooId+x+i);
if(i==1){
element.setAttribute(value, First name);
}
if(i==2){
element.setAttribute(value, Last name);
}
if(i==3){
element.setAttribute(value, age);
}
var foo = document.getElementById(fooBar);
foo.appendChild(element);
foo.innerHTML += ' ';
}
i++;
var element = document.createElement(input);
element.setAttribute(type, button);
element.setAttribute(value, Remove);
element.setAttribute(id, fooId+x+i);
element.setAttribute(name, fooId+x+i);
element.setAttribute(onclick, removeRow(this));
foo.appendChild(element);
var br = document.createElement(br);
foo.appendChild(br);
x++;
}
</SCRIPT>
<body>
<center>
<form id=form name=form action=test.php method=post enctype=multipart/form-data>
<input type=text id=foo01 name=foo01 value=first name>
<input type=text id=foo02 name=foo02 value=last name/>
<input type=text id=foo03 name=foo03 value=age>
<br>
<span id=fooBar></span>
<FORM>
<INPUT type=button value=Add more data onclick=add()/>
<input type=submit value=Submit>
</center>
</FORM>
</form>
</body>
More From » html
