add to <input> to <form> with javascript?

B

Ben

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
 
R

RobB

Ben said:
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'.
 
R

RobB

(snip)

On 2nd thought...#:=(

Think a list might be more appropriate.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">

body {
margin: 40px;
background: #eee;
}
form {
width: 250px;
}
div.container {
width: 98%;
font: normal 12px arial;
text-align: center;
padding: 1px;
margin: 2px 0;
border: 1px #000 solid;
}
div.container ol {
margin: 0;
}
div.container input {
font: normal 11px arial;
margin: 3px 0;
}

</style>
<!--[if IE]>
<style type="text/css">
div.container li {
margin-left: 22px;
}
</style>
<![endif]-->
<script type="text/javascript">

var filenum = 1;

function addfile(els)
{
var container, template;
if ((container = document.getElementById('uplist'))
&& (template = container.getElementsByTagName('li')[0]))
{
var newitem = template.cloneNode(true);
var newipt = newitem.getElementsByTagName('input')[0];
newipt.name = 'file' + ++filenum;
container.appendChild(newitem);
els[newipt.name] = newipt;
}
}

function remfile()
{
if (filenum > 1)
{
var container;
if (container = document.getElementById('uplist'))
{
container.removeChild(container.lastChild);
--filenum;
}
}
}

function ipt_onkeypress()
{
window.status = 'foo';
}

function init()
{
if (document.getElementById
&& document.createElement)
{
var badd, bdel;
if ((badd = document.getElementById('addf'))
&& (bdel = document.getElementById('delf')))
{
badd.disabled = false;
badd.onclick = function()
{
return addfile(this.form.elements);
}
bdel.disabled = false;
bdel.onclick = function()
{
return remfile();
}
}
}
}

window.onload = init;

</script>
</head>
<body>
<form name="aForm" method="post" action="">
<div class="container" style="background:#ccc;">
<ol id="uplist">
<li>
<input
type="file"
name="file1"
onkeypress="ipt_onkeypress()">
</li>
</ol>
<div class="container" style="background:#aaa;">
<input
id="addf"
type="button"
style="width:110px;"
value="Attach More Files"
disabled="disabled">
<input
id="delf"
type="button"
style="width:110px;"
value="Remove Last File"
disabled="disabled">
</div>
<div class="container" style="background:#888;">
<input
type="submit"
value="Done">
</div>
</div>
</form>
</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top