Working with IE7, jQuery and Forms

If you just want the solution skip the context

Context

For my work I had to make a register form from where the user had to send three separate files.

The non-javascript version is a simple form with three input file, like the following:

<form enctype="multipart/form-data" id="formMain">
  <input type="file" name="file1" />
  <input type="file" name="file2" />
  <input type="file" name="file3" />
  <button type="submit">Submit</button>
</form>

However the javascript version (meaning javascript enabled in the browser) had to have an “add” button next to each input so the chosen solution was to change at the loading time the structure of the form for this one:

<form enctype="multipart/form-data" target="iframe1" id="form1">
 <input type="file" name="file1"/>
 <button type="submit">Add</button>
</form>
<iframe class="hidden" onLoad="iframeLoaded(this);" id="iframe1" name="iframe1"/>

The purpose of the iframe is to upload the file without reloading the page. The user select a file, hit the add button and then the form will be submitted to the iframe thanks to the “target” attribute. When the iframe will be loaded it’ll return some json and the iframeLoaded function will manage the state of the page (depending if there were an error like file too big or else).

So, let’s make this structure with the previous form:

//Unwrap the main form
$("#formMain").replaceWith($("#formMain").contents()); 
//Creating the new form
var $newForm1 = $("<form/>").attr({"enctype":"multipart/form-data", "target":"iframe1", "id":"form1"});
//Wrapping the first input with the new form
$("input[type=file][name=file1]").wrap($newForm1);
//Creating the add button and adding to the form
$("<button/>").attr({"type":"submit"}).appendTo($newForm1);
//Creating the iframe, binding the onLoad event and appending it next to the form
$("<iframe/>").attr({"class":"hidden", "id":"iframe1", "name":"iframe1"}).appendTo($newForm1.parent()).on("load", function(){/*do your stuff*/});

Ok so you open your favorite browser (meaning a modern browser like chrome), you test it works! (Normally :D)

Then you open Internet Explorer because yes your agency has accepted the customer minimal requirement of IE7+ and it doesn’t work ! Why?

Solution

If you want to create (on-the-fly) forms and they work with IE7 you have to:

  • Write $(“<form></form>”) instead of $(“<form/>”). Both instructions are valid in all browsers but IE7. I don’t know why..
  • Change the name (put one if you haven’t) of the form every time you change its place in the page with something like $newForm1.attr(“name”, “newForm1″+(Math.floor(Math.random()*1000)));
  • More specific to my context the “.on(“load”, callback)” or “.load(callback)” doesn’t really work on iframeS in IE7 so you have to declare your iframe with the onLoad attribute at the generation time of the page.
Advertisements
This entry was posted in tips, web and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s