Brief: I need to grab the information in parentElement, but I need the input information updated. when I am grabbing the innerHTML of parentElement, after the box is unchecked, it still shows up checked. The html is not reflecting changes I've made with javascript.

I have a small snippet of my code here: /

<div id="parentElement">
<label id="thisLabel">
    <input type="checkbox" id="idnumber" checked="checked"> Bring Mail Inside
</label>
</div>
<p>
<a onClick="checkit()">Check it out</a>
</p>
<p onclick="checkToggle()">change to false</p>


function checkit() {
alert(document.getElementById("parentElement").innerHTML);
}
function checkToggle() {
element = document.getElementById("thisLabel");
element.childNodes[0].checked = false;
alert("the checkbox is checked: " + element.childNodes[0].checked);
}

The slightly longer version of why I am going about it like this: This is a large form that a site inspector checked out. It is brought into an online software app, and the lady in charge of munication with clients will review this information, speak back with the inspector on the phone. This form is saved in a database as html. After the woman is done reviewing the form, there may be a box or two that wasn't checked, that she would like to check, before emailing to the client ( there were issues, needed to be fixed, now that they are fixed, she can send out the proper report that everything was checked off)

She checks the boxes off, but they don't update the HTML, they only change the value, which will show, but won't show up when I get the innerHTML of parentElement. You will see in my JSFIDDLE /:

Click check it out upon loading: checked = checked

uncheck box: checked = checked

change to false: alert confirms the checked property is false, but check it out shows the innerHTML as checked.

I will need to access this innerHTML with the proper information loaded (as in, if it is checkmarked, the html should reflect that)

PRE-EDIT: I think I can do this by making an event onclick of the label. That event takes the ("parentElement").innerHTML and split it in a few different places and put it back together with the right checked value. Will be slightly different if the input isn't checked to begin with. That is the only way I can think of doing this, and it just doesn't seem like the right way.

Brief: I need to grab the information in parentElement, but I need the input information updated. when I am grabbing the innerHTML of parentElement, after the box is unchecked, it still shows up checked. The html is not reflecting changes I've made with javascript.

I have a small snippet of my code here: http://jsfiddle/7993K/8/

<div id="parentElement">
<label id="thisLabel">
    <input type="checkbox" id="idnumber" checked="checked"> Bring Mail Inside
</label>
</div>
<p>
<a onClick="checkit()">Check it out</a>
</p>
<p onclick="checkToggle()">change to false</p>


function checkit() {
alert(document.getElementById("parentElement").innerHTML);
}
function checkToggle() {
element = document.getElementById("thisLabel");
element.childNodes[0].checked = false;
alert("the checkbox is checked: " + element.childNodes[0].checked);
}

The slightly longer version of why I am going about it like this: This is a large form that a site inspector checked out. It is brought into an online software app, and the lady in charge of munication with clients will review this information, speak back with the inspector on the phone. This form is saved in a database as html. After the woman is done reviewing the form, there may be a box or two that wasn't checked, that she would like to check, before emailing to the client ( there were issues, needed to be fixed, now that they are fixed, she can send out the proper report that everything was checked off)

She checks the boxes off, but they don't update the HTML, they only change the value, which will show, but won't show up when I get the innerHTML of parentElement. You will see in my JSFIDDLE http://jsfiddle/7993K/8/:

Click check it out upon loading: checked = checked

uncheck box: checked = checked

change to false: alert confirms the checked property is false, but check it out shows the innerHTML as checked.

I will need to access this innerHTML with the proper information loaded (as in, if it is checkmarked, the html should reflect that)

PRE-EDIT: I think I can do this by making an event onclick of the label. That event takes the ("parentElement").innerHTML and split it in a few different places and put it back together with the right checked value. Will be slightly different if the input isn't checked to begin with. That is the only way I can think of doing this, and it just doesn't seem like the right way.

• javascript

• 2 Side note: your element variable is an implicit global, don't forget your var. – jbabey Commented Feb 6, 2013 at 18:33
• thank you. I did this quickly and should practice better to keep in good form – Nicholas Decker Commented Feb 6, 2013 at 18:42

2 Answers 2

The state of checkboxes and the value of input boxes are NOT a part of the source HTML.

For proof of this, try putting a textbox on a page with value="old", change the value, then pare element.getAttribute("value") and element.value - they're not the same.

You really should save the state of the form, rather than the HTML behind it.

This is happening because element.childNodes[0].checked = false; is setting the DOM property, which is a separate entity than the HTML attributes.

Your checkit function should also be interrogating the DOM property, not checking the innerHTML.

See this question for more information about DOM properties and HTML attributes.