/    Sign up×
Community /Pin to ProfileBookmark

DOM created file upload forms don’t submit in IE

Ok, I am creating a music upload program and nearing the end.

I request a bunch of tracks for an album, loop through the JSON, and use DOM methods to create a form with a input/file box for each track. I submit the form the files are uploaded, and all is well in Firefox land (naturally).

I’ve created a sandbox of my problem here.

This doesn’t submit the form in IE

[CODE]
<script type=”text/javascript”>
function init(){
var theForm = document.createElement(‘form’);
theForm.method = “POST”;
theForm.action = “index2.php”;
theForm.target = “theFrame”;
theForm.enctype = “multipart/form-data”;

var input = document.createElement(‘input’);
input.setAttribute(“type”, “file”);
input.name = “mp3[]”;
theForm.appendChild(input);
var submit = document.createElement(‘input’);
submit.setAttribute(“type”, “SUBMIT”);
theForm.appendChild(submit);

document.body.appendChild(theForm);
document.getElementById(‘theDiv’).innerHTML = ‘<iframe name=”theFrame” id=”theFrame” src=”index2.php”></iframe>’;
}
</script>
<body onLoad=”init();”>
<div id=”theDiv”></div>
</body>
[/CODE]

However, if I create this exact same page using HTML… it works.
The music uploading part of this program is the last step… and I really don’t want to create a seperate page for this, because the rest of the program is all javascript (and 1 page).

Any ideas?

to post a comment
JavaScript

6 Comments(s)

Copy linkTweet thisAlerts:
@konithomimoFeb 16.2007 — IE has a problem setting the name of a dynamically created element. Therefore, this line:

input.name = "mp3[]";

will produce and error in IE, but not other browsers. IE accepts .NAME (all caps) instead of .name (all lower case). However, other browsers such as FF do not support it. There are a few ways to get around it. The first is to hardcode an object onto your page, and then use cloneNode to clone it. If you do so then all browsers also clone the attribute, including the name. The other way is to detect IE and do input.NAME, or if not IE then do input.name

The other thing I suggest is to not use predefined values such as form, top, or input for variable names.
Copy linkTweet thisAlerts:
@nrjCLauthorFeb 16.2007 — that was just a recreation of my problem. I normally don't name my variables that way.

However, I have fixed the problem for anyone who is interested

When setting the "enctype" of a form via DOM use:
[CODE]
document.TheForm.encoding = "";
[/CODE]


not .enctype =
Copy linkTweet thisAlerts:
@UltimaterFeb 16.2007 — IE accepts .NAME (all caps) instead of .name (all lower case). However, other browsers such as FF do not support it.[/QUOTE]
That sounds like a lesson to me however I cannot seem to get IE to agree with what you are saying. Mind demonstrating? The only workaround I learned was:
<i>
</i>try{
var input=document.createElement('&lt;input type="file" name="mp3[]"&gt;')
}catch(E){
var input=document.createElement('input');
input.setAttribute("type","file");
input.setAttribute("name","mp3[]");
}
Copy linkTweet thisAlerts:
@konithomimoFeb 17.2007 — The first method in your example will work, but the second one will not. If you use the second method and then view the innerHTML of the object you will see that it does not have a name attribute showing (in IE). If you then try to use PHP/ASP to get the value of it you will not be able to. MSDN puts it as thus:

The NAME attribute cannot be set at run time on elements dynamically created with the createElement method. To create an element with a name attribute, include the attribute and value when using the createElement method.
[/quote]


The method they suggest to fix it is the first method you showed:

var input=document.createElement('<input type="file" name="mp3[]">')

Once you do that you can then add the other attributes using setAttribute. If however you check for IE (or activeX) then you can do it as I described. Either your first way, or the methods I specified will work.
Copy linkTweet thisAlerts:
@konithomimoFeb 17.2007 — Of course, I only use the above methods when dealing with PHP/XML/AJAX. If you need for JS to get the value of the created object then you have to use the method that Ultimater gave. I just find it convenient to add in attriibute when using XML, since you usually check for ActiveX anyway.
Copy linkTweet thisAlerts:
@raul1Feb 25.2007 — The same problem, I've encountered: submitting a form into a dynamically created IFRAME: FireFox and Opera worked perfect but IE not! :mad:

After 1 day of debugging, I founded that , following solution works:

[CODE]
var iFrameID = 'ID1';
var myIFrame = document.createElement('iframe');

myIFrame.setAttribute('src', 'about:blank');
myIFrame.setAttribute('id', iFrameID);
myIFrame.setAttribute('NAME', iFrameID);
myIFrame.style.display = 'none';
document.body.appendChild(myIFrame);
if((onReadyFunction) && (typeof(onReadyFunction) == 'function')) captureEvent('load', function(){ var iFrame = document.getElementById(iFrameID); var doc = (iFrame.contentDocument)?(iFrame.contentDocument):((iFrame.contentWindow)?(iFrame.contentWindow.document):(self.frames[iFrameID].document)); if (doc.location.href == 'about:blank') { return; } else { onReadyFunction(doc.body.innerHTML); } }, myIFrame);
[B]if(self.frames[iFrameID].name != iFrameID) { /* *** IMPORTANT: This is a BUG FIX for Internet Explorer *** */ self.frames[iFrameID].name = iFrameID; }[/B]

[/CODE]


Meanning that AFTER the iframe is created, it should be checked that [B]self.frames[iFrameID].name[/B] is equal with [B]iFrameID[/B]

That's all! ?

[SIZE="1"]The problem was encountered and resolved by me during myAJAX development

[/SIZE]
×

Success!

Help @nrjCL spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...