动态创建和appendChild图像输入按钮不显示为表单元素？

Question

我正在动态创建文件上传表单。我将动态创建的表单附加到动态创建的div。到目前为止一切都很好。

其中两个表单元素显示为有效的表单字段：类型=文本字段和类型=文件字段。

在appendChild两个type = image字段之后，图像按钮确实显示在弹出窗体中，但由于某种原因我得到一个javascript错误“错误：TypeError：document.forms.fileform。上传未定义“。

警告提示显示document.forms ['fileform']。长度只有两个元素，而不是我期望的四个元素。

在div中创建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);
  }
}

我应该补充一点，如果我使用plain-jane type =“submit”而不是type =“image”按钮，这个表单就可以了。但这不是我想要的，而且我不满足于平庸。

感谢 Musa 带领我找到解决方案。

我改变了：

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


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

为：

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


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

...瞧，这个剧本没有错误。但是，这些字段不会显示为表单字段。但实际上并不重要，因为我可以附加onclicks给他们，他们做他们应该做的事情。

Answer 1

我做了一些搜索，<input type="image">元素未包含在表单元素集合中，请参阅备注http://msdn.microsoft.com/en-us/library/ms537449(v=VS.85).aspx，因此您无法从表单元素中引用它。由于您已经引用了应该使用它的元素

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);
  }
}