Question

I am trying to make a button to add another input box every time it is clicked but I also want it to add an increasing number the end of the input name. I have this code to add more inputs.

<script type="text/javascript">
function addInput()
{
    var x = document.getElementById("inputs");
    x.innerHTML += "<input type=\"file\" name=\"photo\" />";
}
</script>

What can I do to make it so that every time a new form is added it will add a higher number to the end of name=”photo” so that I can process images with my php script correctly?

default the form is:

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

but I would like to add a number to the end of photo every time a new input is made to have an output like this.

 <input type="file" name="photo">
 <input type="file" name="photo2">
 <input type="file" name="photo3">
 <input type="file" name="photo4">

etc

Answer 1

You can use [] in your form name, then your php script will automatically convert those inputs into an array, that way you don’t even have to worry about appending numbers anymore.

<input type="file" name="photo[]">

If you want to do it using javascript, easiest way is to have a variable that keeps track of the number of inputs

var inputNumber = 0;
function addInput()
{
    var x = document.getElementById("inputs");
    x.innerHTML += "<input type=\"file\" name=\"photo\"" + inputNumber + " />";
    inputNumber++;
}