add another field [Archive] - Dynamic Drive Forums

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

<!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+"'> <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.