Javascript how to add remove?

Question

Hey Everyone,

Well what i am trying to do is basically you can upload multiple files. An well i want to be able to add "remove" to each file uploaded so in case the user decides they don't want to upload that file. Here is what i go so far

Here is the code

<script type="text/javascript">

var upload_number = 2;

function addFileInput()

{

var d = document.createElement("div");

var file = document.createElement("input");

file.setAttribute("type", "file");

file.setAttribute("name", "attachment"+upload_number);

d.appendChild(file);

var text = document.createElement("input");

text.setAttribute("type", "text");

text.setAttribute("name", "description"+upload_number);

document.getElementById("moreUploads").a...

document.getElementById("totalAttachment... = upload_number;

upload_number++;

}

</script>

heres the form

<input type="file" name="attachment1" id="attachments"

value="" onchange="document.getElementById('

moreUploadsLink')

.style.display = 'block';" />

Description <input type="text" name="description1"

id="description" value="" />

<div id="moreUploads"></div>

<div id="moreUploadsLink" style="display:none;">

<input type="button" value="Attach another file"

onclick="javascript:addFileInput();" >

</div>

<input type="hidden" id="totalAttachments" name="totalAttachments" value="1">

Thank you in advance

Rach

Answer 1

What you need to do is create an input named: fileupload[]

the [] will make it an array. Create a link that says add more files. Each time that the user clicks the link it will call a function that will add inside a div that is inside the form a new div with a  new file input with the same name. This should take care of the issue.

&lt;form name=&quot;form1&quot; id=&quot;form1&quot;&gt;

&lt;div id=&quot;fileholder&quot;&gt;

&lt;div&gt;

&lt;input type=&quot;file&quot; name=&quot;fileupload[]&quot; /&gt;

&lt;a href=&quot;#&quot; onclick=&quot;addMore()&quot;&gt;add&lt;/a&gt;

&lt;/div&gt;

&lt;/form&gt;

&lt;script&gt;

function addMore(){

  var div = document.getElementById(&#039;fileHolder&#039;);

  var d = document.createElement(&quot;div&quot;);

  var file = document.createElement(&quot;input&quot;);

  file.setAttribute(&quot;type&quot;, &quot;file&quot;);

  file.setAttribute(&quot;name&quot;, &quot;fileupload[]&quot;);

  d.appendChild(file);

  div.appendChild(d);

}

&lt;/script&gt;

You will need to do the same with description fields and so on.