IE <= 8 removes <form> tag when received

问题:

I'm making an AJAX POST call to get some HTML. I take that HTML and inject it into the DOM. Everything works fine and dandy in every browser except for IE <= 8. It seems like IE is parsing the incoming HTML since when I log it to console/alert it, tags are in capitals.

The line it's removing:

<form class="uniForm" enctype="multipart/form-data" action="/profile/editprofile/" method="post">

Very bizarre because the end tag is there but the start tag isn't. The call is a standard jQuery POST ($.post()).

UPDATE:

Ended up giving up and putting it into an embedded textarea and reinjecting into the DOM:

<!--[if lt IE 9]>
<textarea class="ieHackTextArea">
<!--[if lt IE 9]>
<![endif]-->

... somewhere else ...

if ($.browser.msie && parseFloat($.browser.version) < 9) {
    ui.panel.innerHTML = $(".ieHackTextArea").val(); // jQuery injection doesn't work
}

回答1:

I ran into the exact same problem today and managed to fix it by inserting an empty <pre></pre> right before the <form>, which somehow stops IE8 (haven't tested in other versions) from removing the <form>.

回答2:

You can try to wrap all the form into a <div> to see if that works better.

I experienced the same issue with an <input> object and that was my solution to make sure it will work fine in IE8.

回答3:

I have the exactly same scenario, and the same problem with a slight twist. I get an input type=hidden tag, removed as well as the form tag. I didn't found the reason why this is happening. Did anyone find anything new on this problem since august last year?

Also I tried wrapping the form in a div tag, and nothing changed. If I write some text, or $nbsp; on a line above the form tag, the form will render.

I can also I can confirm that this problem is in IE7 as well (if it matters).

回答4:

The solution is fast and simple, just remove last slash from the action="" attribute (just in URL) of form tag.

Example:

WRONG (IE)

<form action="http://mywebsite.com/something/">
</form>

CORRECT

<form action="http://mywebsite.com/something">
</form>

Only remove the slash in the end of form action="".

回答5:

use navigator.userAgent inside your javascript handler to identify the browser and apply suiatble logic. It is straightfoward compare to "CSS hack". You can reference here http://www.useragentstring.com/pages/Internet%20Explorer/

The userAgent of IE will most likely carry the String MSIE (Miscrosoft internextExplorer perhaps :D)

Basically:

if(navigator.userAgent.indexOf('MSIE 7.0') > -1){
   /* Do watever suitable for IE7 here */ 
}else if(navigator.userAgent.indexOf('MSIE 8.0') >-1){
   /* Do watever suitable for IE8 here */ 
}else{
  /* The rest... */
}