-1

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>
Daniel Bragg
  • 1,773
  • 1
  • 12
  • 25
  • The quoted code doesn't use `document.all` at all. We can't help you with code we cannot see. The full content of your question must be **in** your question, not just linked. Links rot, making the question and its answers useless to people in the future, and people shouldn't have to go off-site to help you. Put a [mcve] **in** the question, ideally using Stack Snippets (the `<>` toolbar button) to make it runnable. More: [*How do I ask a good question?*](/help/how-to-ask) – T.J. Crowder May 03 '17 at 20:16
  • The linked jsFiddle does, but it's a different example. I am working on a fiddle that more closely matches what the code is doing. – Daniel Bragg May 03 '17 at 20:17
  • 1
    Not a fiddle. **On-site.** Fiddle links are just that: Links. – T.J. Crowder May 03 '17 at 20:17
  • oh. I'll post code once I can confirm it demonstrates the issue. Sorry for posting the original question prematurely. – Daniel Bragg May 03 '17 at 20:18
  • Is your question about `document.all` or `document.myForm`? You can simply replace `document.all(x)` (which was never standard-conforming) with `document.getElementById(x)`. If it's about `document.myForm`, that's standard-conforming. – Barmar May 03 '17 at 20:31
  • I have edited the OP above to include a single small file that demonstrates the issue I'm facing. Thanks, T.J., for reminding me of the site's requirements for this kind of useful information. BTW, I cannot see Stack Snippets - do I need to download a separate toolbar for this functionality? – Daniel Bragg May 03 '17 at 21:19
  • @Barmar, this is mostly about document.all, but it also is about document.some_form_name, as this site uses both liberally.If Id fields are non-unique, then document.all will return an array (or a node list? can't keep those straight), but getElementById will only ever return one element (the first one). – Daniel Bragg May 03 '17 at 21:22
  • IDs are supposed to be unique. If you're using duplicate IDs, no portable Javascript will by able to deal with it easily. – Barmar May 03 '17 at 21:29
  • You could use `document.getElementByName('2630')` since it looks like your duplicate IDs map to corresponding names. – Barmar May 03 '17 at 21:31
  • This is an error I have to remember often: There is *no* getElementByName, only getElementsByName (pardon the plurality). That's a part of the reason why we're troubleshooting this: we thought our code was using getElementByName, but it couldn't have been, because it doesn't exist. – Daniel Bragg May 03 '17 at 22:18

1 Answers1

0

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.

Daniel Bragg
  • 1,773
  • 1
  • 12
  • 25