JavaScript: create form fields with different names?

Question

I'm using the following code to create file upload inputfields and it works perfectly.

however, I need to rename them like so:

mytext[1]
mytext[2]
mytext[3]

etc etc...

so I did simply put var i = 0; and then I put the i++ in the code. when I alert the i I get 1,2,3 etc in the alert box so I know that works.

but this line is wrong and I cannot figure out how to use the i variable in this line:

<div><input type="file" name="mytext[i]"/></div>

and this is the entire code:

<script>
$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
    var i = 0;

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            i++
            $(wrapper).append('<div><input type="file" name="mytext[[i]]"/></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});
</script>

and the HTML code:

            <div class="input_fields_wrap">
    <button class="add_field_button">Add More Photos</button>

    <div><input type="file"  name="mytext[]"/></div>
</div>

could someone please advise on this?

Thanks

musefan · Accepted Answer · 2014-12-23 11:01:50Z

2

You need to concatenate the value into the string, you can't just add i within the actual string value.

Also, not sure why you have double square brackets [[]], I think you just need one set.

Try this:

$(wrapper).append('<div><input type="file" name="mytext[' + i + ']"/></div>');

Here is a basic example.

edited Dec 23, 2014 at 11:01

answered Dec 23, 2014 at 10:54

musefan

48.5k21 gold badges144 silver badges193 bronze badges

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

Comments

Nishan Senevirathna · Accepted Answer · 2014-12-23 10:56:26Z

0

Try something like this,

$(wrapper).append("<div><input type='file' name='mytext[["+i+"]]'/></div>");

answered Dec 23, 2014 at 10:56

Nishan Senevirathna

7196 silver badges12 bronze badges

Comments

Sinan Samet · Accepted Answer · 2014-12-23 10:58:11Z

0

You don't even need to add the "i". PHP Will automatically do this when you submit the forum. Unless you want to give them other names. The shorter your code is the easier it is to maintain.

answered Dec 23, 2014 at 10:58

Sinan Samet

6,78213 gold badges57 silver badges97 bronze badges

1 Comment

musefan Over a year ago

How do you know the OP is using PHP?

Collectives™ on Stack Overflow

JavaScript: create form fields with different names?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related