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>

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. (2017). In WikiEducator/VirtualMV wiki. Retrieved October 20, 2017, from http://wikieducator.org/VirtualMV/JavaScript/Forms/getElement    (zotero)