Javascript add file input box button trouble

Question

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

Answer 1

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.

Javascript add file input box button trouble

Question

1 answers

solution1
1 2014-11-21 20:08:40

Javascript add file input box button trouble

Question

1 answers

solution1 1 2014-11-21 20:08:40

solution1
1 2014-11-21 20:08:40