How to add multiple input boxes with different names

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

I could give you an answer using jQuery if you like?

Paul Grimshaw
– Paul Grimshaw

2012-03-30 09:09:53 +00:00
Commented Mar 30, 2012 at 9:09 — Paul Grimshaw
– Paul Grimshaw, Commented Mar 30, 2012 at 9:09

Andreas Wong · Accepted Answer · 2012-03-30 09:23:09Z

2

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++;
}

edited Mar 30, 2012 at 9:23

answered Mar 30, 2012 at 9:08

Andreas Wong

60.7k19 gold badges112 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mesimplybj · Accepted Answer · 2012-03-30 09:13:14Z

2

Declare a count and initialize it to 0, then increase it in every call.

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

answered Mar 30, 2012 at 9:13

mesimplybj

6391 gold badge5 silver badges28 bronze badges

1 Comment

Andreas Wong Over a year ago

note: you don't need to escape " if you are wrapping your string around '

Niet the Dark Absol · Accepted Answer · 2012-03-30 09:11:37Z

1

andeas's answer is probably best for this specific situation. But in general if you want a counter that will increase every time a function is called, try:

(function {
    var counter = 0;
    window.myfunction = function() {
        // do stuff, use counter if needed
        counter++;
    }
})();

counter can be treated as if it were a static variable in this context.

answered Mar 30, 2012 at 9:11

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Collectives™ on Stack Overflow

How to add multiple input boxes with different names

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related