How to Access HTML Form Elements in JavaScript – Tutorial

By Saruque Ahamed Mollick

Hello developers, in this tutorial I am going to show you how to access HTML form elements in JavaScript.

I know it’s very important to the developers to get the HTML form data or to access the form field value via JavaScript. So here I will show you how to access those data with some basic and easy examples so that all of you can easily get what I am trying to show you.



Also Read,

How To Print Specific Part or Div of Webpage Using Javascript

How To Add Browser Notification Using JavaScript

Check if String Contains a Specific Word in JavaScript

Access HTML Form Elements in JavaScript – Tutorial With Examples

We are going to access HTML from elements in JavaScript. So, our first task is to create an HTML form.

Let’s create an HTML form with some form fields.

<!DOCTYPE html>
<html>
<head>
  <title>Find In JavaScript</title>

</head>
<body>
  <form>
    Enter your name:
    <input type="text" name="yourname"> <br> <br>
    Enter Password: 
    <input type="password" name="yourpassword"> <br> <br>
    <input type="submit" name="submit" value="Register">
  </form>
  
</body>
</html>

This is our HTML Form code. Now suppose you have to do some tasks using JavaScript.

Values we can get through JavaScript From an HTML Form

  1. Access number of fields of a Form.
  2. Access each value separately using JavaScript from an HTML form
  3. Accessing each data from elements of an HTML form in JavaScript

Access number of elements present in a form using JavaScript

So at first let’s see how to get the number of elements of an HTML form in JavaScript

The JavaScript is here,

<script type="text/javascript">
		var number_elements=document.forms[0].length;
		document.write(number_elements);
	</script>

Here, document.forms[0].length; gives us the value of the number of elements present in a particular form of a webpage. forms[0] means we are trying to access the 1st form of a webpage. This is very similar to array’s index concept. If we are trying to access the 6th form of a webpage then we have to use forms[5] as array index starts with zero.

So let’s show you full code to print the number of elements present in our form or number of form field present in our form.

<!DOCTYPE html>
<html>
<head>
  <title>Find In JavaScript</title>

</head>
<body>
  <form>
    Enter your name:
    <input type="text" name="yourname"> <br> <br>
    Enter Password: 
    <input type="password" name="yourpassword"> <br> <br>
    <input type="submit" name="submit" value="Register">
  </form>
  <script type="text/javascript">
    var number_elements=document.forms[0].length;
    document.write(number_elements);
  </script>
  
</body>
</html>

This will give you the output 3 as we have 3 fields in our form.

Remember if you have declared any name for your form then you can use your form name instead of using forms[index].

Access form elements data in Javascript

<script type="text/javascript">
		var number_elements=document.forms[0].elements[0].name;
		document.write(number_elements);
	</script>

This will print “yourname” as, we are accessing the first form of our webpage and then accessing the 1st element’s name by this line – document.forms[0].elements[0].name;

So the full code is,

<!DOCTYPE html>
<html>
<head>
  <title>Find In JavaScript</title>

</head>
<body>
  <form>
    Enter your name:
    <input type="text" name="yourname"> <br> <br>
    Enter Password: 
    <input type="password" name="yourpassword" value=""> <br> <br>
    <input type="submit" name="submit" value="Register">
  </form>
  <script type="text/javascript">
    var number_elements=document.forms[0].elements[0].name;
    document.write(number_elements);
  </script>
  
</body>
</html>

 

If  you wanna display the value of a form field you can use the below JavaScript,

<!DOCTYPE html>
<html>
<head>
  <title>Find In JavaScript</title>

</head>
<body>
  <form>
    Enter your name:
    <input type="text" name="yourname" value="gsjg"> <br> <br>
    Enter Password: 
    <input type="password" name="yourpassword" value="khsh"> <br> <br>
    <input type="submit" name="submit" value="Register">
  </form>
  <input type="button" onclick="value_show()">
  

  <script type="text/javascript">
    function value_show(){
    var number_elements=document.forms[0].elements[0].value;
    document.write(number_elements);
  }
  
  
</body>
</html>

But here is a problem with this script. It will display the value on the next page.

So just use the below script instead of the previous one,

<!DOCTYPE html>
<html>
<head>
  <title>Find In JavaScript</title>

</head>
<body>
  <form id="frm1" name="frm1">
    Enter your name:
    <input type="text" name="yourname" value="gsjg"> <br> <br>
    Enter Password: 
    <input type="password" name="yourpassword" value="khsh"> <br> <br>
    <input type="submit" name="submit" value="Register">
  </form>
  
  <input type="button" onclick="newfun()">

  
  function newfun(){
    var x = document.getElementById("frm1");
    var text = "";
    var i;
    for (i = 0; i < x.length ;i++) {
        text += x.elements[i].value + "<br>";
    }
    document.getElementById("demo").innerHTML = text;
  }
  </script>
  <p id="demo"></p>
  
</body>
</html>

Making a simple JavaScript form validator

 

Leave a Reply

Your email address will not be published. Required fields are marked *