Search code examples
javascripthtmlweb-standards

Standards compliant code for document.all replacement


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>

Solution

  • 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.