1

I've got a simple form in html:

<form action="" method="post">
    <input id="title" name="title" size="30" type="text" value="">
    <input type="submit" value="Save this stuff">
</form>

I also have a file upload on the page, which handles uploads using ajax and adds the files to a mongoDB. The file upload returns the mongoDB id of the file (for example 12345) and I want to add that id to the form as a hidden field so that the id is POSTed to the server upon submitting the form. Since the user can add multiple files though, I want to add a list of id's to the form.

I found how I can add one hidden field to a form from javascript, but this always handles a single field, not a field with multiple values. So I thought of adding a checkbox field to the form so that I can submit multiple values in one element, but it kinda feels like a hack.

Can anybody hint me in the right direction on how I can add a hidden list of values to a form using Javascript? All tips are welcome!

[EDIT] In the end I would like the form to look something like this:

<form action="" method="post">
    <input type="hidden" name="ids" value="[123, 534, 634, 938, 283, 293]">
    <input id="title" name="title" size="30" type="text" value="">
    <input type="submit" value="Save this stuff">
</form>
Community
  • 1
  • 1
kramer65
  • 50,427
  • 120
  • 308
  • 488
  • I am sorry but i dont understand what you mean by file-id? Or can you make a sample how the form should look with 2-3 items like you want it to be? – Shaeldon Oct 29 '14 at 14:53
  • what is wrong with adding multiple hidden fields, one for each file? – Woodrow Barlow Oct 29 '14 at 14:58
  • @WoodrowBarlow - Then what `name` do I give to the field? As far as I know every name should be unique. I could give them names like `file1` and `file2`, but then on the server side I have to iterate over all the possible names until I find the field is not present anymore. Isn't there a solution to provide a list with a form? – kramer65 Oct 29 '14 at 15:03
  • @Shaeldon - I added some clarification what I mean by id's. I store the files in mongodb and return an idea with the upload. I then want to add that id to a list of file-id's in the form. But I don't know how to add a hidden field containing a list of valuea, instead of just one value. – kramer65 Oct 29 '14 at 15:05

3 Answers3

9

I am not sure if I understand your question correctly, so I may just be guessing here.

Try adding multiple hidden inputs with a name such as ids[] so that they will be posted to the server as an array.

Example:

<form action="" method="post">
    <input type="hidden" name="ids[]" value="123">
    <input type="hidden" name="ids[]" value="534">
    <input type="hidden" name="ids[]" value="634">
    <input type="hidden" name="ids[]" value="938">
    <input type="hidden" name="ids[]" value="283">
    <input type="hidden" name="ids[]" value="293">
    <input type="submit" value="Save this stuff">
</form>
Neil Acero
  • 126
  • 5
0

Do you mean that for each time the user clicks the 'upload' button you need to add a hidden field to the form? Can you post the entire form, that should clear things up...

[Edit] you could store the id's in an Array, everytime an id should be added to the hidden field's value you could do somthing like:
$('#ids').attr('value', idArray.join());

I'm just typing this out of the box so excuse any little errors

MightyBarto
  • 21
  • 3
  • I added an example of how I would like the form to look in the end. Is there anything like this in forms? – kramer65 Oct 29 '14 at 15:11
0

Why not simply concatenating all the ids into a string like so "123,456,890,..etc" and then adding them as a value to ids inupt. When you need them, simply split by ',' which would give you an array with ids?

Todo so only with javascript something like this should work

var elem = document.getElementById("ids");
elem.value = elem.value + "," + newId;
Emke
  • 357
  • 4
  • 14