difference between document.surveym.chkIE.checked and document.getElementsByName('chkIE').checked

I try to use approved DOM2 methods so my code is cross-browser consistent (as much as can be expected).  I have a form with a checkbox control for a browser (say IE), followed by a selection control with several version numbers as the options with the selection.  I want to find out if the checkbox has been checked, and if so, look at the version number.

I don't understand why the .checked property doesn't work the same for two different ways to interrogate this, but I find that

document.getElementsByName('chkIE').checked evaluates to undefined
document.surveym.chkIE.checked evaluates to false

I can't get the results I want with getElementsByName inside nested if..else statements, but the form's name (surveym) works with no problem.  Can you explain the difference?



<script type="text/javascript">
. . .
var ieChecked = document.getElementsByName('chkIE').checked;
. . .
if (!ieChecked)
{
  alert("ieChecked is undefined");
}
else
{
  strValues += "\n" + "ieVersion = " + ieVersion;
  if (!ieVersion)
  {
    alert("no ieVersion");
    strMissingInfo += "\n     -  Explorer Version";
  }
  else
  {
    alert("ieVersion = " + ieVersion);
  }  // end if ieVersion
}  // end if ieChecked
. . .
</script>
. . .
. . .
      <label><input type="checkbox" name="chkIE" value="IE"/>Internet Explorer.....</label>
      <datalist name="IE_version">
        <select name="lstIE" size="1">
          <option value="99">-- select from list --</option>
          <option value="60">6.0</option>
          <option value="70">7.0</option>
          <option value="80">8.0</option>
          <option value="legacy">previous</option>
        </select><br/>
      </datalist>

Open in new window

LVL 2
Alan VargaAccess DeveloperAsked:
Who is Participating?
 
sunithnairCommented:
getElementsByName returns an array(collection) of objects with the name. You need to use getElementsByName("chkIE")[0].checked if you want to get the checked property of the 1st element found.
0
 
sunithnairCommented:
The best way to do is to use getElementById and define an id for your checkbox
<script type="text/javascript">
. . .
var ieChecked = document.getElementById('chkIE').checked;
. . .
if (!ieChecked)
{
  alert("ieChecked is undefined");
}
else
{
  strValues += "\n" + "ieVersion = " + ieVersion;
  if (!ieVersion)
  {
    alert("no ieVersion");
    strMissingInfo += "\n     -  Explorer Version";
  }
  else
  {
    alert("ieVersion = " + ieVersion);
  }  // end if ieVersion
}  // end if ieChecked
. . .
</script>
. . .
. . .
      <label><input type="checkbox" name="chkIE" id="chkIE" value="IE"/>Internet Explorer.....</label>
      <datalist name="IE_version">
        <select name="lstIE" size="1">
          <option value="99">-- select from list --</option>
          <option value="60">6.0</option>
          <option value="70">7.0</option>
          <option value="80">8.0</option>
          <option value="legacy">previous</option>
        </select><br/>
      </datalist>

Open in new window

0
 
sunithnairCommented:
Check this link if you need to know more about getElementsByName and getElementById
http://www.w3schools.com/htmldom/met_doc_getelementsbyname.asp
http://www.w3schools.com/HTMLDOM/met_doc_getelementbyid.asp
0
 
Alan VargaAccess DeveloperAuthor Commented:
sunithnair,

Thanks for your quick response.  This looks promising; I'll try working with the 0th array element and get back to you.

Since my form submissions are through Yahoo, I'm stuck using name attributes instead of id attributes.  When I substituted id for name the submission resulted in error messages from Yahoo.

Alan

0
 
Alan VargaAccess DeveloperAuthor Commented:
Understanding that I am working with a single-element array instead of a regular variable solved the problem.  My form is working much better.  Thanks for your help!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.