add another field

**ches** · 12-28-2006, 03:26 PM

I am looking for some code reminiscent of gmail's "attach another file"

What i need is a text input, and next to it, an "add another entry" link
when it is pressed, another text input is displayed below with the "add another entry" link next to it.

when the form is submitted, i would like all the results to be combined into one entry separated by colons.
...however, i am able to do the latter after the form is submitted

EDIT: it would also be nice to have a "delete field" option (in case if "add another" was clicked too many times")

**codeexploiter** · 12-29-2006, 04:40 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Forms Field Dynamically!!</title>
<script type="text/javascript">
function addField()
{
	var mainOb = document.getElementById('mainDiv');
	var valOb = document.getElementById('val');
	var num = (document.getElementById("val").value -1)+ 2;
	valOb.value = num;
	var newDivName = "my"+num+"Div";
	var newDiv = document.createElement('div');
	newDiv.setAttribute("id",newDivName);
	newDiv.innerHTML = "<input type='text' name='"+newDivName+"'>&nbsp;<a href='#' onclick='removeField(\""+newDivName+"\");'>Remove Field</a>";
	mainOb.appendChild(newDiv);
}

function removeField(divNam)
{
	var o = document.getElementById('mainDiv');
	var oldDiv = document.getElementById(divNam);
	o.removeChild(oldDiv);
}
</script>
</head>

<body>
<form>
<input type="hidden" value="0" id="val" />
<p><a href="#" onclick="addField();">Add Some Elements</a></p>
<div id="mainDiv"> </div>
</form>
</body>
</html>

The above code does the dynamic insertion of form field, in this case text box.

Thread: add another field

Thread Tools

Search Thread

add another field

Bookmarks

Bookmarks

Posting Permissions