I am currently battling an IE JavaScript/DOM bug (what fun) and it has truly stumped me. The code in question copies some checkboxes into a form and needs to maintain their checked state. Problem is, IE (specifically IE8, though I'm guessing others as well) doesn't want to do that.
I've narrowed down the bug itself to a very small test case. Basically, things work correctly without a DOCTYPE on the page but they are broken when a DOCTYPE is present. I would have expected the opposite, but who knows with IE.
Following are the simplest possible test cases. For each of them: open the page in IE, toggle the checkbox, then click "TEST".
Does not produce the bug:
<input type="checkbox" id="broken">
<button id="break">TEST</button>
<script>
document.getElementById('break').onclick = function() {
alert(document.getElementById('broken').outerHTML);
};
</script>
Link
Produces the bug:
<!DOCTYPE html>
<input type="checkbox" id="broken">
<button id="break">TEST</button>
<script>
document.getElementById('break').onclick = function() {
alert(document.getElementById('broken').outerHTML);
};
</script>
Link
The bug occurs on valid pages (with <html>, <head>, <body>, etc) and whether or not the input is inside a form. In the "broken" case, outerHTML always reflects what was present on page load (if I have the input checked by default then it always alerts code with CHECKED, even if I uncheck it first). Things happen the same way if I wrap the input and use innerHTML. On the actual site I am using jQuery's .clone() method to do the copying; .clone() uses .outerHTML internally and that's how I narrowed this down.
My question is this: is there a way around this short of manually building new HTML myself? And does anyone have any idea WHY this happens in the first place (other than "IE SUX LOLZ")?
I am currently battling an IE JavaScript/DOM bug (what fun) and it has truly stumped me. The code in question copies some checkboxes into a form and needs to maintain their checked state. Problem is, IE (specifically IE8, though I'm guessing others as well) doesn't want to do that.
I've narrowed down the bug itself to a very small test case. Basically, things work correctly without a DOCTYPE on the page but they are broken when a DOCTYPE is present. I would have expected the opposite, but who knows with IE.
Following are the simplest possible test cases. For each of them: open the page in IE, toggle the checkbox, then click "TEST".
Does not produce the bug:
<input type="checkbox" id="broken">
<button id="break">TEST</button>
<script>
document.getElementById('break').onclick = function() {
alert(document.getElementById('broken').outerHTML);
};
</script>
Link
Produces the bug:
<!DOCTYPE html>
<input type="checkbox" id="broken">
<button id="break">TEST</button>
<script>
document.getElementById('break').onclick = function() {
alert(document.getElementById('broken').outerHTML);
};
</script>
Link
The bug occurs on valid pages (with <html>, <head>, <body>, etc) and whether or not the input is inside a form. In the "broken" case, outerHTML always reflects what was present on page load (if I have the input checked by default then it always alerts code with CHECKED, even if I uncheck it first). Things happen the same way if I wrap the input and use innerHTML. On the actual site I am using jQuery's .clone() method to do the copying; .clone() uses .outerHTML internally and that's how I narrowed this down.
My question is this: is there a way around this short of manually building new HTML myself? And does anyone have any idea WHY this happens in the first place (other than "IE SUX LOLZ")?
Share Improve this question edited Jun 22, 2010 at 21:32 Matt Kantor asked Jun 22, 2010 at 21:18 Matt KantorMatt Kantor 1,7691 gold badge19 silver badges37 bronze badges 3-
Both versions, whether the check box is checked or not, output
undefinedin Firefox 3.6.3. In Chromium 5.0.375.70 and Opera 10.10 both versions alert<input type="checkbox" id="broken">(all browsers running in Linux). – Marcel Korpel Commented Jun 22, 2010 at 21:32 - Possibly related? -- stackoverflow./questions/1388893 – gnarf Commented Jun 22, 2010 at 21:42
- @blow, @Marcel: Firefox doesn't support .outerHTML. I'm actually using jQuery's .clone() method, which uses .cloneNode() in Firefox, so that isn't an issue. This is specifically an IE question. – Matt Kantor Commented Jun 22, 2010 at 22:02
3 Answers
Reset to default 5There are problems in general with innerHTML and form properties. Not just in IE ((its worse in FF, it will NEVER update the checked property in innerHTML))...
You can try this to work around the issue in the linked question:
document.getElementById('break').onclick = function() {
var broken = document.getElementById('broken');
if (broken.checked) broken.setAttribute('checked','checked');
else broken.removeAttribute('checked');
alert(broken.outerHTML);
};
I ended up writing a wrapper for .clone() based off gnarf's answer:
$.fn.inputClone = function(events) {
this.each(function() {
this.attr('value', this.value);
if(this.checked) this.setAttribute('checked', 'checked');
else this.removeAttribute('checked');
if(this.selected) this.setAttribute('selected', 'selected');
else this.removeAttribute('selected');
});
return this.clone(events);
};
It's not very general-purpose (e.g. it won't work if you try to clone elements containing inputs), but for this case it seems to do the trick.
Use the DOM equivalent object of a checkbox http://www.javascriptkit./jsref/checkbox.shtml
Add it to your DOM form, dont use HTML and this dirty way.
For clarity:
var domCheckBox=document.getElementById('mycheckboxID');
var domForm=document.getElementById('myformID');
domForm.appendChild(domCheckBox);
This add your checkbox to your form and preserve the checked state (and other).