title: What is the difference between JavaScript's getElementById() and getElementsByName() functions?
body: <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>