Moving a file input field

Moving a file input field

I have a set of web forms used to upload multiple files to a server. The first form (template) takes information shared between the files, and the remaining forms have the file information. What I am trying to do is, for each file, make a new form (final), copy the template form data into the final form, then copy the file input field into the final form, and then call an ajax upload.

I've gotten everything but the file copy correct. Any suggestions on what I should do?

Here is the code snippet:

  1.  var checkin_num = 0
     var app = $("#app-frame") //the frame where the web application is displayed
     var template_items = $("#CoreForm").find("INPUT");
     //action/method and some hidden inputs set to '...' to save spece
     var form_html = "\n[pre-form-" + checkin_num + "]\
    \n<FORM ID=\"CHECKIN_FORM_" + checkin_num + "\" NAME=\"final_checkin_form\"\
    \n ... enctpe=\"multipart/form-data\">\
    ...";

     //this part works perfectly
     for(var i = 0; i < template_items.length; i++)
     {
     itm = template_items[i];

     form_html += "\
    \n<INPUT TYPE=\"HIDDEN\" ID=\"" + itm.id + "\" VALUE=\"" + itm.value.replace('"', "&#34;") +
    "\" NAME=\"" + itm.name + "\"></INPUT>";
     
     }
     form_html += "\n</FORM>[post-form-" + checkin_num + "]";
     app.append(form_html);

     //now we must grab the file:
     var myfrm = $("#CHECKIN_FORM_" + checkin_num);
     //neither append line adds my file field to the form
     var fileref = $("#nc-" + checkin_num + "[name='primaryFile']");
     myfrm.append(fileref.get());
     myfrm.append(fileref);
     //this next line gets inserted
     myfrm.append("<B>HELLO WORLD! I'M A FORM!</B>");