improper handling of form tags when added with innerHTML

RESOLVED WORKSFORME

Status

()

Firefox
General
RESOLVED WORKSFORME
7 years ago
4 years ago

People

(Reporter: Arnaldo Viegas de Lima, Unassigned, NeedInfo)

Tracking

3.6 Branch
x86_64
All
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

7 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.12) Gecko/20101026 Firefox/3.6.12
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.12) Gecko/20101026 Firefox/3.6.12

When changing a page using innerHTML, if the new content has a table with a form inside, the handling of the form tags may cause all or parts of the new content not to render. The result may vary depending of the location of the form tag. Check the HTML in steps to reproduce for a few examples. Tested with 3.6.12 under Windows 7, Mac OS X 10.6.5 and Linux (CentOS 5.5).

Reproducible: Always

Steps to Reproduce:
1. Load this file and see the results:

<html>
<head>
<style type="text/css">
#div1 { background-color: #ccc }
#div2 { background-color: #aaa }
#div3 { background-color: #888 }
#div4 { background-color: #666 }
</style>
<script>
function add() {
    var e1=document.getElementById('div1');
    var e2=document.getElementById('div2');
    var e3=document.getElementById('div3');
    var e4=document.getElementById('div4');
    e1.innerHTML='<table><tr><td>dynamic content #1 - no form</td></tr></table>';
    e2.innerHTML='<table><tr><td>row 1 before the form</td><tr><td>row 2 before the form</td></tr><form><tr><td>dynamic content #2 - with form</td></tr><tr><td>row after the form</td></form></table>text outside the table!';
    e3.innerHTML='<table><tr><td>row 1 before the form</td><tr><td><form>row 2 before the form - inside another form</form></td></tr><form><tr><td>dynamic content #3 - with form</td></tr><tr><td>row after the form</td></form></table>text outside the table!';
    e4.innerHTML='<form><table><tr><td>dynamic content #4 - with form outside</td></tr></table></form>';
}
</script>
</head>
<body onload="add()">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<table><form><tr><td>static content - with form</td></tr></form></table>
</body>
</html>
Actual Results:  
There are 5 examples of tables in the sample code. Some will display properly some will not. This is very simple HTML/Javascript, so it's very easy to spot the problem. 

Expected Results:  
all content should have been displayed the same way as if they were entered as static HTML.

Firefox was run in safe mode to ensure that no extension was interfering.

Updated

7 years ago
Version: unspecified → 3.6 Branch

Comment 1

4 years ago
This seems to work fine on:
Mozilla/5.0 (X11; Linux i686; rv:29.0) Gecko/20100101 Firefox/29.0

Do you still see any issues here?
Flags: needinfo?(arnaldo)

Updated

4 years ago
Status: UNCONFIRMED → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.