Ben wrote:
Here's my form:
<form name="aForm" method='post'>
<input type=file name=file1 onkeypress='KeyPress()'><br>
<a
id='attachMoreLink'
href='javascript:AddFileInput()">Attach More Files
</a>
<input type=submit value='Done'>
</form>
Question:
How can I add an <input> field to a <form> when I click on "Attach
More Files"?
so, after first button click, the form becomes...
<form name="aForm" method='post'>
<input type=file name=file1 onkeypress='KeyPress()'><br>
<input type=file name=file2 onkeypress='KeyPress()'><br>
<a
id='attachMoreLink'
href='javascript:AddFileInput()">Attach More Files
</a>
<input type=submit value='Done'>
</form>
and so on.... until I click "DONE"
thanks....
Ben
There have been some support issues with Node.cloneNode() in the past
but they may have been resolved...if so:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
div.container {
width: 222px;
font: normal 12px arial;
text-align: center;
padding: 4px;
margin: 2px;
border: 1px #000 solid;
background: #ccc;
}
div.container input {
margin-left: 2px;
}
input.button {
font: normal 11px arial;
margin: 2px 0;
}
</style>
<script type="text/javascript">
var filenum = 1;
function addfile(els)
{
var container,
lastipt = els['file' + filenum],
newipt = lastipt.cloneNode(true);
newipt.name = 'file' + ++filenum;
if (container = document.getElementById('upfiles'))
{
var span = document.createElement('span');
span.appendChild(document.createTextNode(filenum)) ;
container.appendChild(document.createElement('br') );
container.appendChild(span);
container.appendChild(newipt);
els[newipt.name] = newipt; //IE, yech...
}
}
function delfile()
{
if (filenum > 1)
{
var container, i = 3;
if (container = document.getElementById('upfiles'))
{
while (i--)
{
container.removeChild(container.lastChild);
}
--filenum;
}
}
}
function ipt_onkeypress()
{
window.status = 'foo';
}
</script>
</head>
<body>
<form name="aForm" method="post" action="">
<div id="upfiles"
class="container">1<input
class="button"
type="file"
name="file1"
onkeypress="ipt_onkeypress()"></div>
<div class="container"
style="background:#aaa;">
<input
class="button"
type="button"
value="Attach More Files"
onclick="return addfile(this.form.elements)">
<input
class="button"
type="button"
value="Delete Last"
onclick="return delfile()">
</div>
<div class="container"
style="background:#888;">
<input
class="button"
type="submit"
value="Done">
</div>
</form>
</body>
</html>
ie5/mac may require adding that event handler 'manually'.
