VirtualMV/JavaScript/Forms/getElement

From WikiEducator
Jump to: navigation, search




Introduction

Overview

  • 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: http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

Example that compares using DOM and the getElementById method

<html>
<head>
<script type="text/javascript">
  function displayResult() {
    alert( "Name is " + document.myForm.txtFName.value + " " +
        	document.getElementById("txtLName").value);
    }
  </script>
</head>
<body>
<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>
</form>  
</body>
</html>

Common error message getElementById (ID)

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

Solution

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:https://wikieducator.org/VirtualMV/JavaScript/Forms/getElement    (zotero)