From WikiEducator
Jump to: navigation, search



  • We can simplify getting values from a form using getElementById method.

VmvIcon Objectives.png

By the end of this page you will be able to:

  • Understand the JavaScript getElementById method.

Refer to:

Example that compares using DOM and the getElementById method

<script type="text/javascript">
  function displayResult() {
    alert( "Name is " + document.myForm.txtFName.value + " " +
<form name="myForm">
   <p>Enter Your Firstname:<input type="text" name="txtFName" value="" /><br />  
      Enter Your Lastname:<input type="text" id="txtLName" value="" /></p> 
  <p><button type="button" onclick="displayResult()">Display Name</button></p>

Common error message getElementById (ID)

Error message: File.html:13 Uncaught TypeError: document.getElementByID is not a function


Something that is really hard to catch is as JavaScript is Case sensitive it is easy to have ID rather than Id.

Note the difference between input attribute name and id.

VmvIcon References.png References

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/JavaScript/Forms/getElement. (2022). In WikiEducator/VirtualMV wiki. Retrieved August 12, 2022, from http:    (zotero)