Forms : Add Input Fields / The JavaScript Source

Browse Doc JS's Tips!

Promotions

Free Announcements

General

Use this script to upload files. As a file is selected, another input field is automatically added.

Notes

Created by: Jeroen Haan
Web Site: http://www.haan.net
Posted: June 23, 2008

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: addInputFields.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Jeroen Haan | http://www.haan.net */

function fileFields() {
	 var x = document.getElementById('imageUpload');
	 x.onclick = function() {
  		var i = parseFloat(this.lastChild.id)+1;
  		input = document.createElement("input");
  		input.setAttribute("type", "file");
  		input.setAttribute("name", 'imageName_' + i);
  		input.setAttribute("id", i);
  		this.appendChild(input);
	 }
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  fileFields();
});

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

#imageUpload input {
	display: block;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="addInputFields.js"></script>

Body

Paste this code into the BODY section of your HTML document


<!--  This must all be on one line  -->
<a href="#" id="imageUpload"><input type="file" name="imageName_1" id="1" /></a>

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites