CODEWITHSUNDEEP
javascriptfunctionuploadelement
Brian Cherdak
Brian Cherdak

Reputation: 109

Javascript add file input box button trouble

I am building a multi file uploader and would like to start each input on a new line with a
with java script.

What I am trying to do is start every new box under each other instead of lining up next to each other. Could someone show me what to add to the java script so it creates an element
.

I tried these adding them to the end of the javascript function, and it didnt work

var txt = document.createElement('br');
AND
txt = document.createElement('br');
AND
txt.element ="<br>";

i have a multi uploader here's the code.

<!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> :: FILEUPLOAD :: </title>
</head>

<body>
<form name="form" method="post" enctype="multipart/form-data">
  <div id="files">
      <input type="file" name="item_file[]">
  </div>
  <a href="javascript:_add_more();" title="Add more">+</a>
</form>

<script language="javascript">
<!--
function _add_more() {
    var txt = document.createElement('input');
    txt.type="file";
    txt.name="item_file[]";
    document.getElementById("files").appendChild(txt);
}
</script>
</body>
</html>

Thanks for the assistance

Upvotes: 0

Views: 127

Answers (1)

adamdc78
adamdc78

Reputation: 1161

Add a class to each input:

function _add_more() {
  var txt = document.createElement('input');
  txt.type="file";
  txt.name="item_file[]";
  txt.className="file-picker";
  document.getElementById("files").appendChild(txt);
}

Then add display: block to your css for the class:

input.file-picker
{
  display: block
}

Working version in this fiddle.

EDIT: You may also want to add bottom padding to the CSS class.

Upvotes: 1

Related Questions