Question

I’m creating file(images) upload form.
I want to add input elements by clicking on button.

This is my input:

<input type="file" name="file"/>

I’ve alerady write some code:

        <script language="javascript">
fields = 0;
function addInput() {
if (fields < 10) {
document.getElementById('text').innerHTML += "<input type="file" name="file"/><br />";
fields += 1;
} else {
document.getElementById('text').innerHTML += "<br />Only 10 upload fields allowed.";
document.form.add.disabled=true;
}
}
</script>

But it’s ugly and not works…

I have prototype library and want to use it to add inputs.

So i need a button to add given inputs and on more button near every input to remove it – like when you attaching files to your mail.

Answer 1

[See it in action]

HTML

<div id="text"></div>
<div id="warning"></div>

Javascript

fields = 0;

function addInput() {
  if (fields < 10) {
    var id = "file" + fields;
    document.getElementById('text').innerHTML +=
      "<div><input type='file' name='"+id+"' />" +
      " <a href='#' onclick='removeInput(this.parentNode)' />remove</div>";
    fields += 1;
  } else {
    document.getElementById('warning').innerHTML =
      "Only 10 upload fields allowed.";
    document.form.add.disabled = true;
  }
}

function removeInput( el ) {
  if (fields > 0) {
    document.getElementById('warning').innerHTML = "";
    var parent = document.getElementById('text');
    parent.removeChild(el);
    fields -= 1;
  }
}

​
​