2

I only get the last file downloaded from the form submit(), whereas I expect multiple files to be downloaded using the for loop. I'm pretty new to JavaScript and jQuery. Please help.

I'm sending a request to a certain Web API URL (WEBAPIURL) which takes a token (TOKEN) for authentication and a file reference number (fileId). I've provided all of the parameters correctly. I can download each individual file but cannot download multiple files when sending them through a for loop. Only the last file is downloaded.

for(id in fileIDs){

    var form = $('<form></form>').attr('action', WEBAPIURL).attr('method', 'post');
    form.append($('<input></input>').attr('type', 'hidden').attr('name', "token").attr('value', TOKEN));
    form.append($('<input></input>').attr('type', 'hidden').attr('name', "fileId").attr('value', fileIDs[id]));
    form.appendTo('body').submit().remove();
}
Eric Galluzzo
  • 3,191
  • 1
  • 20
  • 20
Justin
  • 53
  • 3
  • You should show us the entire code, not just the loop, but most likely `var form = ...` inside the loop overwrites the previous form with a new form, and you end up with only the last one – adeneo Apr 04 '16 at 11:48
  • I don't get what you are doing. You're adding and removing forms with hidden values in order to submit. There's one small problem: the first time you submit, the page will be reloaded. So any other submissions will never happen. It seems like you need to use [AJAX](http://api.jquery.com/jquery.ajax/) for this. What kind of file are you downloading exactly? – Mikey Apr 04 '16 at 12:30
  • @Justin as you are using a certain web api so you need to check its documentation to see they have a method for allowing multiple file downloads simultaneously, else you need to call single requests for each file – shivgre Apr 04 '16 at 12:48
  • Thanks all your kind replies. @adeneo I've given each form an unique id like .attr('id', fileIDs[id]) and I could verify that the form is appended into the 'body' correctly. But, it does not solve. – Justin Apr 05 '16 at 04:43
  • @Mikey when I deleted .remove() I could see that each form is inserted into the body. If 3 ids are passed to this loop, all three forms are appended correctly. But seemingly only last form is submitted. – Justin Apr 05 '16 at 04:44
  • @shivgre according to the documentation of the web api, I think I made single request for each file but using 'for' loop. – Justin Apr 05 '16 at 04:44
  • You can _append_ multiple forms. However, unless you are using AJAX, you will not be able _submit_ these multiple form together. Only one, as you have experienced, will be submitted. Does this API have a name or URL to its documentation page? And what kind of file are you trying to download? – Mikey Apr 05 '16 at 13:44
  • This [answer](http://stackoverflow.com/a/7843577/1022914) may explain what is happening in your case. – Mikey Apr 05 '16 at 13:51

1 Answers1

0

From what limited information you have provided I think you are using same names for multiple fields,you should be using array names with [] for multiple values and then should get an array on server side in your $_POST. 

for(id in fileIDs){

    var form = $('<form></form>').attr('action', WEBAPIURL).attr('method', 'post');

    //I don't know what you are doing with TOKEN, make this as array if needed
    form.append($('<input></input>').attr('type', 'hidden').attr('name', "token").attr('value', TOKEN));

    //edit here in field name to make it a array of field
    form.append($('<input></input>').attr('type', 'hidden').attr('name', "fileId[]").attr('value', fileIDs[id]));
    form.appendTo('body').submit().remove();
}
shivgre
  • 1,163
  • 2
  • 13
  • 29
  • Thanks for the examples. But, I cannot change server's behavior. The server receives token and file reference no for each request, and return binary data (file). Btw, I could do the same for-looping but using iFrame instead of form request. iFrame works successful. It downloaded all files from the same for-looping. However, iFrame methodology doesn't work for IE properly. I really want to know why 'form.submit' cannot trigger download for each request. – Justin Apr 05 '16 at 04:55
  • @Justin I could have used curl to call the api and get response, but I am not sure how curl will handle file response. From what limited information I have on your WEBAPI, I think that it is meant to work on single fileID at a time, you can reference the API documentation and see what they have written in examples or Endpoint parameters that you are passing and calling. – shivgre Apr 05 '16 at 05:05
  • @Justin Oh, so your API ENDPOINT that you called in your form action is returning just one file as Content-Disposition and so is the reason only 1 file gets downloaded – shivgre Apr 05 '16 at 05:50