We have ancient code that dynamically creates HTML form data from a database, and it was written that references document.all to fetch an array of non-uniquely Id'd check boxes. I need to find the "method of fewest changes" to get the code to function in a Standards-compliant manner. My question is about replacing both the document.myForm
and document.all
calls with something that produces the same thing, but is standards-compliant.
<form name="myForm">
....
<input name="2630" id="ck_2630" onclick="click(document.myForm.ck_2630[0]);" type="checkbox" value="139"><span onclick="document.myForm.ck_2630[0].checked = !document.myForm.ck_2630[0].checked;click(document.myForm.ck_2630[0]);">Ankle, Left</span><br/>
<input name="2630" id="ck_2630" onclick="click(document.myForm.ck_2630[1]);" type="checkbox" value="140"><span onclick="document.myForm.ck_2630[1].checked = !document.myForm.ck_2630[1].checked;click(document.myForm.ck_2630[1]);">Ankle, Right</span><br/>
<input name="2630" id="ck_2630" onclick="click(document.myForm.ck_2630[2]);" type="checkbox" value="141"><span onclick="document.myForm.ck_2630[2].checked = !document.myForm.ck_2630[2].checked;click(document.myForm.ck_2630[2]);">Arm, Left</span><br/>
<input name="2630" id="ck_2630" onclick="click(document.myForm.ck_2630[3]);" type="checkbox" value="142"><span onclick="document.myForm.ck_2630[3].checked = !document.myForm.ck_2630[3].checked;click(document.myForm.ck_2630[3]);">Arm, Right</span><br/>
...
</form>
<script>
....
function getElem_Opener(strElementName) {
return document.all(strElementName);
}
....
</script>
The code works in all versions of IE, except for IE 11 in Edge mode, because the code uses document.all('ck_2630')
to fetch the array. Edge gets rid of document.all (the statement if (document.all)
returns false), but I don't know if it also does away with the document.<form name>.<element name/id>
construct, which seems to handle its fields the same way as document.all
does.
<form name="myForm" method="post">
<button onclick="checkElement('139'); return false;">Select Left Ankle</button><br/>
<button onclick="checkElement('140'); return false;">Select Right Ankle</button><br/>
<button onclick="checkElement('141'); return false;">Select Left Arm</button><br/>
<button onclick="checkElement('142'); return false;">Select Right Arm</button><br/>
<table name="tbl2630">
<tr id="rw_2630_139" style="display:none"><td>
<input name="2630" id="ck_2630" onclick="click(document.myForm.ck_2630[0]);" type="checkbox" value="139"><span onclick="document.myForm.ck_2630[0].checked = !document.myForm.ck_2630[0].checked;click(document.myForm.ck_2630[0]);">Ankle, Left</span>
</td></tr>
<tr id="rw_2630_140" style="display:none"><td>
<input name="2630" id="ck_2630" onclick="click(document.myForm.ck_2630[1]);" type="checkbox" value="140"><span onclick="document.myForm.ck_2630[1].checked = !document.myForm.ck_2630[1].checked;click(document.myForm.ck_2630[1]);">Ankle, Right</span>
</td></tr>
<tr id="rw_2630_141" style="display:none"><td>
<input name="2630" id="ck_2630" onclick="click(document.myForm.ck_2630[2]);" type="checkbox" value="141"><span onclick="document.myForm.ck_2630[2].checked = !document.myForm.ck_2630[2].checked;click(document.myForm.ck_2630[2]);">Arm, Left</span>
</td></tr>
<tr id="rw_2630_142" style="display:none"><td>
<input name="2630" id="ck_2630" onclick="click(document.myForm.ck_2630[3]);" type="checkbox" value="142"><span onclick="document.myForm.ck_2630[3].checked = !document.myForm.ck_2630[3].checked;click(document.myForm.ck_2630[3]);">Arm, Right</span>
</td></tr>
</table>
<script>
function click(ck) {
alert("selected item " + ck.name + ", value " + ck.value);
}
function getElem_Opener(strElementName) {
return document.all(strElementName);
}
function checkElement(intAltID){
var boolValid = false, boolIsCheckbox = false;
var strItemID = "2630";
var elem = getElem_Opener('ck_' + strItemID);
var elemRow = null, elemUncheck = null, elemTable;
boolIsCheckbox = true;
if (elem.length) {
for (var i = 0; i < elem.length; i++) {
if (elem[i].value == intAltID) {
elem[i].checked = true;
boolValid = true;
elemRow = getElem_Opener('rw_' + strItemID + '_' + intAltID);
break;
}
}
}
if (boolValid) {
if (elemRow != null) {
elemRow.style.display = 'inline';
}
}
}</script>
</form>
In all of my research, I have found that the best replacement for document.all
is document.getElementById
, unless the outcome is expected to return multiple hits and then you need to use the Name attribute for it, and use document.getElementsByName
. This is the solution we've been using, and so far it's worked splendidly. In places where document.<formName>
encounters any problems, we've employed the same solution.