Question

I’m dynamically creating a file upload form. I attach the dynamically created form to a dynamically created div. So far so good.

Two of the form elements show up as valid form fields: A type=text field, and a type=file field.

After appendChild-ing the two type=image fields, the image buttons do indeed show up in the pop-up form, but for some reason I’m getting a javascript error “Error: TypeError: document.forms.fileform.Upload is undefined”.

An alert prompt reveals that document.forms[‘fileform’].length is only two elements, not the four I expect.

Code that creates the div and the form within the div:

if(! document.getElementById("fileformdiv")){
  var fileformdiv = document.createElement("div");
  fileformdiv.setAttribute("id","fileformdiv");
  fileformdiv.setAttribute("style","position:relative;top:-200px;left:-250px;height:160px;line-height:30px;width:220px;border:#aaa 1px solid;background:#eee;z-index:10;text-align:left;padding:10px 10px 10px 10px;");
  document.getElementById("stampContainer").appendChild(fileformdiv);

  var fileform = document.createElement("form");
  fileform.setAttribute("enctype","multipart/form-data");
  fileform.setAttribute("id","fileform");
  fileform.setAttribute("name","fileform");

  var descriptionprompt = document.createTextNode("Say something about this file:");

  var filedescription = document.createElement("input");
  filedescription.setAttribute("id","filedescription");
  filedescription.setAttribute("name","filedescription");
  filedescription.setAttribute("type","text");
  filedescription.setAttribute("style","position:relative;width:200px;height:30px;margin:10px 10px 10px 0px;");

  var filename = document.createElement("input");
  filename.setAttribute("id","filename");
  filename.setAttribute("name","filename");
  filename.setAttribute("type","file");
  filename.setAttribute("style","position:relative;width:200px;margin:10px 10px 10px 0px;");

  var uploadbutton = document.createElement("input");
  uploadbutton.setAttribute("name","Upload");
  uploadbutton.setAttribute("id","Upload");
  uploadbutton.setAttribute("type","image");
  uploadbutton.setAttribute("style","position:relative;margin:0px 0px 0px 60px;width:80px;height:30px;");
  uploadbutton.setAttribute("src",baseUrl+"images/upload.gif");

  var cancelbutton = document.createElement("input");
  cancelbutton.setAttribute("name","Cancel");
  cancelbutton.setAttribute("id","Cancel");
  cancelbutton.setAttribute("type","image");
  cancelbutton.setAttribute("style","position:relative;margin:-30px 0px 0px 140px;width:80px;height:30px;");
  cancelbutton.setAttribute("src",baseUrl+"images/cancel.gif");

  var linebreak = document.createElement("br");


  document.getElementById("fileformdiv").appendChild(fileform);
  document.forms['fileform'].appendChild(descriptionprompt);
  document.forms['fileform'].appendChild(filedescription);
  document.forms['fileform'].appendChild(linebreak);
  document.forms['fileform'].appendChild(filename);
  document.forms['fileform'].appendChild(linebreak);
  document.forms['fileform'].appendChild(uploadbutton);
  document.forms['fileform'].appendChild(cancelbutton);

  document.forms['fileform']['Upload'].onclick = function() { submitFile(); return false; };
  document.forms['fileform']['Cancel'].onclick = function() { document.getElementById("fileformdiv").parentNode.removeChild(document.getElementById("fileformdiv")); };

  for(i=0;i<document.forms['fileform'].length;i++){
     alert(document.forms['fileform'][i].name);
  }
}

I should add that this form works just fine if I use the plain-jane type=”submit” rather than a type=”image” button. But that’s not what I want, and I don’t settle for mediocre.

Thanks to Musa for leading me to a solution.

I changed:

document.forms['fileform']['Upload'].onclick = function() { submitFile(); return false; };


document.forms['fileform']['Cancel'].onclick = function() { document.getElementById("fileformdiv").parentNode.removeChild(document.getElementById("fileformdiv")); };

to:

submitbutton.onclick = function() { submitFile(); return false; };


cancelbutton.onclick = function() { document.getElementById("fileformdiv").parentNode.removeChild(document.getElementById("fileformdiv")); };

…and voila, the script works without errors. Still, the fields don’t show up as form fields. But it doesn’t matter practically speaking, since I can attach onclicks to them and they do what they are supposed to do.

Answer 1

I did some searching and <input type="image"> elements are not included in the form elements collection see Remarks http://msdn.microsoft.com/en-us/library/ms537449(v=VS.85).aspx, so you cant reference it from the form elements. As you already have references to the elements you should use it

if(! document.getElementById("fileformdiv")){
  var fileformdiv = document.createElement("div");
  fileformdiv.setAttribute("id","fileformdiv");
  fileformdiv.setAttribute("style","position:relative;top:-200px;left:-250px;height:160px;line-height:30px;width:220px;border:#aaa 1px solid;background:#eee;z-index:10;text-align:left;padding:10px 10px 10px 10px;");
  document.getElementById("stampContainer").appendChild(fileformdiv);

  var fileform = document.createElement("form");
  fileform.setAttribute("enctype","multipart/form-data");
  fileform.setAttribute("id","fileform");
  fileform.setAttribute("name","fileform");

  var descriptionprompt = document.createTextNode("Say something about this file:");

  var filedescription = document.createElement("input");
  filedescription.setAttribute("id","filedescription");
  filedescription.setAttribute("name","filedescription");
  filedescription.setAttribute("type","text");
  filedescription.setAttribute("style","position:relative;width:200px;height:30px;margin:10px 10px 10px 0px;");

  var filename = document.createElement("input");
  filename.setAttribute("id","filename");
  filename.setAttribute("name","filename");
  filename.setAttribute("type","file");
  filename.setAttribute("style","position:relative;width:200px;margin:10px 10px 10px 0px;");

  var uploadbutton = document.createElement("input");
  uploadbutton.setAttribute("name","Upload");
  uploadbutton.setAttribute("id","Upload");
  uploadbutton.setAttribute("type","image");
  uploadbutton.setAttribute("style","position:relative;margin:0px 0px 0px 60px;width:80px;height:30px;");
  uploadbutton.setAttribute("src",baseUrl+"images/upload.gif");

  var cancelbutton = document.createElement("input");
  cancelbutton.setAttribute("name","Cancel");
  cancelbutton.setAttribute("id","Cancel");
  cancelbutton.setAttribute("type","image");
  cancelbutton.setAttribute("style","position:relative;margin:-30px 0px 0px 140px;width:80px;height:30px;");
  cancelbutton.setAttribute("src",baseUrl+"images/cancel.gif");

  var linebreak = document.createElement("br");


  fileformdiv.appendChild(fileform);
  fileform.appendChild(descriptionprompt);
  fileform.appendChild(filedescription);
  fileform.appendChild(linebreak);
  fileform.appendChild(filename);
  fileform.appendChild(linebreak);
  fileform.appendChild(uploadbutton);
  fileform.appendChild(cancelbutton);

  uploadbutton.onclick = function() { submitFile(); return false; };
  cancelbutton.onclick = function() { fileformdiv.parentNode.removeChild(fileformdiv); };

  for(i=0;i<fileform.length;i++){
     alert(fileform[i].name);
  }
}