473,699 Members | 2,388 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

Ben
Here's my form:
<form name="aForm" method='post'>
<input type=file name=file1 onkeypress='Key Press()'><br>
<a
id='attachMoreL ink'
href='javascrip t: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='Key Press()'><br>
<input type=file name=file2 onkeypress='Key Press()'><br>
<a
id='attachMoreL ink'
href='javascrip t:AddFileInput( )">Attach More Files
</a>
<input type=submit value='Done'>
</form>

and so on.... until I click "DONE"

thanks....

Ben
Jul 23 '05 #1
3 12927
One way (but maybe not the best way) to do this is with the innerHTML
property:
http://msdn.microsoft.com/library/de.../innerhtml.asp

Jul 23 '05 #2
Ben wrote:
Here's my form:
<form name="aForm" method='post'>
<input type=file name=file1 onkeypress='Key Press()'><br>
<a
id='attachMoreL ink'
href='javascrip t: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='Key Press()'><br>
<input type=file name=file2 onkeypress='Key Press()'><br>
<a
id='attachMoreL ink'
href='javascrip t: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.cloneNo de(true);
newipt.name = 'file' + ++filenum;
if (container = document.getEle mentById('upfil es'))
{
var span = document.create Element('span') ;
span.appendChil d(document.crea teTextNode(file num));
container.appen dChild(document .createElement( 'br'));
container.appen dChild(span);
container.appen dChild(newipt);
els[newipt.name] = newipt; //IE, yech...
}
}

function delfile()
{
if (filenum > 1)
{
var container, i = 3;
if (container = document.getEle mentById('upfil es'))
{
while (i--)
{
container.remov eChild(containe r.lastChild);
}
--filenum;
}
}
}

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

</script>
</head>
<body>
<form name="aForm" method="post" action="">
<div id="upfiles"
class="containe r">1<input
class="button"
type="file"
name="file1"
onkeypress="ipt _onkeypress()"> </div>
<div class="containe r"
style="backgrou nd:#aaa;">
<input
class="button"
type="button"
value="Attach More Files"
onclick="return addfile(this.fo rm.elements)">
<input
class="button"
type="button"
value="Delete Last"
onclick="return delfile()">
</div>
<div class="containe r"
style="backgrou nd:#888;">
<input
class="button"
type="submit"
value="Done">
</div>
</form>
</body>
</html>

ie5/mac may require adding that event handler 'manually'.

Jul 23 '05 #3
RobB wrote:
Ben wrote:
Here's my form:
<form name="aForm" method='post'>
<input type=file name=file1 onkeypress='Key Press()'><br>
<a
id='attachMoreL ink'
href='javascrip t: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='Key Press()'><br>
<input type=file name=file2 onkeypress='Key Press()'><br>
<a
id='attachMoreL ink'
href='javascrip t:AddFileInput( )">Attach More Files
</a>
<input type=submit value='Done'>
</form>

and so on.... until I click "DONE"

thanks....

Ben


(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.getEle mentById('uplis t'))
&& (template = container.getEl ementsByTagName ('li')[0]))
{
var newitem = template.cloneN ode(true);
var newipt = newitem.getElem entsByTagName(' input')[0];
newipt.name = 'file' + ++filenum;
container.appen dChild(newitem) ;
els[newipt.name] = newipt;
}
}

function remfile()
{
if (filenum > 1)
{
var container;
if (container = document.getEle mentById('uplis t'))
{
container.remov eChild(containe r.lastChild);
--filenum;
}
}
}

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

function init()
{
if (document.getEl ementById
&& document.create Element)
{
var badd, bdel;
if ((badd = document.getEle mentById('addf' ))
&& (bdel = document.getEle mentById('delf' )))
{
badd.disabled = false;
badd.onclick = function()
{
return addfile(this.fo rm.elements);
}
bdel.disabled = false;
bdel.onclick = function()
{
return remfile();
}
}
}
}

window.onload = init;

</script>
</head>
<body>
<form name="aForm" method="post" action="">
<div class="containe r" style="backgrou nd:#ccc;">
<ol id="uplist">
<li>
<input
type="file"
name="file1"
onkeypress="ipt _onkeypress()">
</li>
</ol>
<div class="containe r" style="backgrou nd:#aaa;">
<input
id="addf"
type="button"
style="width:11 0px;"
value="Attach More Files"
disabled="disab led">
<input
id="delf"
type="button"
style="width:11 0px;"
value="Remove Last File"
disabled="disab led">
</div>
<div class="containe r" style="backgrou nd:#888;">
<input
type="submit"
value="Done">
</div>
</div>
</form>
</body>
</html>

Jul 23 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
21289
by: Martin Lucas-Smith | last post by:
I am wanting to know whether are XHTML1-valid characters for use within an id attribute and/or a name attribute. http://validator.w3.org/check?uri=http://www-thaihydro.geog.cam.ac.uk/riverslice/&ss=1&verbose=1 (e.g. see line 77) suggests that it is valid, but the spec suggests that it is not. More detail:
5
13118
by: Jonathan Daggar | last post by:
Hello, I'm trying to put together a form with a very tight table formatting. However, every time I put an text-type input field in, the browser pads the area to the right of it with space. I've tried to eliminate it several ways, but it won't go away. It looks like it's forcing at least one space (line break?) in after each field, and then there's some mystery padding on the right that also refuses to go away. I've put up a demo of...
2
2596
by: Keiron Waites | last post by:
I have the following code: <input type="text" name="search" class="search_top"> <a href="" onclick="window.location='search.inc.php'+document..search. value; return false;" class="search_top">go</a> What do I put within to access the value of the input field search so I can access it's value? Thanks,
4
10543
by: owen | last post by:
I have an <input> box and i want to disable the apostrophe ( ' ) key, so when you press it, no character appears in the input box. All other keys should work ok. I can trap the keypress event using "onkeypress=myKeypressHandler()" but, beyond that, I'm stuck. I forget how to detect what key was pressed or how to "null it out". I'm using IE6 and users will be IE5.0 upward ONLY (trust me on this, suffice to say it's not a website but...
4
18431
by: Rick | last post by:
I'm trying to make an input tag visible or hidden based on the value of another input tag, so that when the 1st input tag is changed in anyway, the 2nd input tag will become visible. Thanks in advance, Rick
2
10719
by: Sreenath Rao Nellutla | last post by:
Hai all, I am trying to create dropdown calendar control with HTML input control by writing JavaScript. But while executing I am getting the error as "Error on Page" on the status bar of the browser. I wrote the following code in the HTML code for the web form: <%@ Page language="c#" Codebehind="WebForm2.aspx.cs" AutoEventWireup="false" Inherits="calendar.WebForm2" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML>...
10
14166
by: neverquit | last post by:
hi , Iam Nagesh,Begineer in using Ajax,well i have been using ajax in application, i have faced a problem while placing the responseTEXT into the <div> tag positioned inside the <form> tag iam able to get the response in the <div> tag in mozilla (im takingthe HTML response), <script> function confirm() { xmlHttp=GetXmlHttpObject(); if (xmlHttp==null)
2
3284
by: jp2code | last post by:
I have several input fields on my form, and the form works; however, Visual Studio is showing errors, and I would like to get rid of them. When the form is submitted, it is redirected back to itself, where it checks the values that were entered. If the default values are set, this is the visitor's first time to access the page. Example: The FirstName field would initially be displayed with "First Name;"
1
2534
by: JPhilS | last post by:
Hi to all Webmaster! I have discover this problem when I inserted the scores of the students i a centain subject. I am making a school project with regards to saving students' record. first, I have to view all students under the certain subject and at the last field, I putted a form to put the scores of each student. say '<input type=text name='score' size=10>' and number of '<input type=text>' is equal to the number of students. I...
0
8623
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9050
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8935
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8893
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6540
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5879
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4389
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4636
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
3
2015
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.