What is the difference between JavaScript's getElementById() and getElementsByName() functions?
<p>Other than the fact that my brief research tells me the latter will return a collection rather than a a single element with the ID passed.</p>

<p>Consider the following code:</p>

<pre><code>function validateAllFields()
{
var clientid = document.getElementById("clientid");
var programs = document.getElementById("programs");
var startmonth = document.getElementById("startmonth");
var startday = document.getElementById("startday");
var startyear = document.getElementById("startyear");
var completed = document.getElementsByName("completed");
var goals = document.getElementsByName("goals");
var errors = document.getElementById("errorMsg");
errors.innerHTML = "";

if(isNumeric(clientid, errors, "Please enter a valid client ID")){
    if(madeSelection(programs, errors, "Please select a program from the drop-down list")){
        if(madeSelection(startmonth, errors, "Please enter a month for the start date")){
            if(madeSelection(startday, errors, "Please enter a day for the start date")){
                if(madeSelection(startyear, errors, "Please enter a year for the start date")){
                    if(checked(completed, errors, "Please choose an option that indicate whether the client has completed the program")){
                        if(checked(goals, errors, "Please choose an option that indicate whether the client has met his/her goals.")){
                            window.alert("GOT IN TO  RETURN TRUE");
                            return true;
                        }
                    }
                }
            }
        }
    }
}
return false;
}
&lt;/script&gt;
</code></pre>

<p>The above code works perfectly after placing it in the onsubmit handler of the form. However, earlier, for the elements (programs, startmonth, startday, startyear) I was using getElementsByName(), the following happened:</p>

<ol>
<li>The code seems to get to the second line of the if blocks "if(madeSelection(programs...." and it displayed the error msg via innerHTML for a brief second and  </li>
<li>Proceeded to submit the form AS IF the JS had indeed returned true. As you can tell, there is a popup alert right before returning true and the popup DID NOT show up at all.  </li>
<li>Bad data was submitted to my test database because the form had not been validated. (yet to write server-side validation with this form, but I will).  </li>
</ol>

<p>please assume the elements <strong>programs</strong>, <strong>startmonth</strong>, <strong>startday</strong>, and <strong>startyear</strong> are drop-down lists with the same id and name attributes.</p>

<p>Also, the madeSelection function is given as:</p>

<pre><code>function madeSelection(element, error, msg) {
if (element[0].value == "none" || element[0].valueOf == "none" || element[0].value == "") {
    error.innerHTML = msg;
    element.focus();
    return false;
} else {
    return true;
}
}
</code></pre>

<p>My code does work right now after I changed those elements to be using getElementById(), I was just wondering why getElementsByName presented such behavior. </p>
