Refering to arrays of form elements (name=“blah[]”)

Question

I have a form with series of 3 file upload fields, each of which has a related hidden "todo" fields.

The file upload fields start greyed out and a user can either upload a new file, remove a file if one has previously been uploaded in that position or leave it unchanged (ie use the previously uploaded file or leave it blank).

The todo fields should store what is to be done with each file (ie 0=upload new, 1=delete existing, 2=leave unchanged).

I have a series of buttons next to the upload field. One for "upload new" (which enables the file upload field and (should) set the related todo field to 0; one for remove (which disables the file upload box); and one for "leave unchanged" (which also disables the file upload field).

I've found the name="blah[]" technique for creating arrays when the form is posted to a PHP document which makes looping through the files nice and easy. The trouble is that I need to edit the value in the related "todo" fields and if they're all named "todo[]" then I can't refer to one specifically...

The code is something like this:

<input type="file" name="file[]" />
<input type="hidden" name="todo[]" />
<input type="button" onclick="enableFileField('file[]', 0)" value="Upload New" />
<input type="button" onclick="enableFileField('file[]', 1)" value="Remove Current" />
<input type="button" onclick="enableFileField('file[]', 2)" value="No Change" />

I'm pretty sure I'm missing something and that this is actually quite simple...

Answer 1

You can give the fields id s in addition to names. The name would be used for the post to the server, but the id can be used for referencing the input in JavaScript:

<input type='hidden' id='todo_0' name='todo[]'>
<input type='hidden' id='todo_1' name='todo[]'>

In JavaScript, document.getElementById("todo_0") will give you the first todo field. Be sure to keep the id s sufficiently different that Internet Explorer doesn't get confused (it has namespace bugs around id and name [it tends -- completely incorrectly -- to put them in the same namespace]).

Answer 2

You could increment a counter in javascript as you add more fields, so you create todo[0], todo[1], etc. This wouldn't change how PHP interprets it.

Edit : Realised you aren't creating fields on the fly in javascript, but the naming still applies

Answer 3

You could give each of the todo inputs a unique ID that you remember, or, I believe you can use

<input type='hidden' name='todo[0]' />
<input type='hidden' name='todo[1]' />

etc. in your HTML.

Answer 4

If I understand what you are asking, you want to be able have to multiple fields that will be used to upload a file. For example, if you have 3 files to modify, you would have three hidden todo fields?

A quick and easy solution would be to keep a hidden field for the number of files such as:

<input type='hidden' name='numFiles' value='1' />

and update that as you add or remove files with javascript. Then as others have suggested, give each todo a unique id as such:

<input type='hidden' name='todo1' />

Now you can easily find a todo because each file will have a unique one and you will be able to update it from there.

Once you post the form, you can pull the number of files there will be from the numFiles field and loop through all the todo's with a number appended to the end.