Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Find Name and Target of a Form in JavaScript
In this article we are going to learn how to find the name and the target of a form in JavaScript.
In HTML, there is <form> element which has few attributes: input, label, text area, select, name, target. The name and target attributes of form are used to find those elements in JavaScript.
The name attribute is used to return the name of the form. The target attribute is used to check whether the result will open in the same window or new window or new frame, when the form is submitted. The possible values for target are blank, _self, _top, _parent.
Syntax
The syntax to get the name of the form is shown below.
document.getElementById('FormID').name;
Where, FormId is the name of the Form id. The function returns a string which consists the name of the form.
Example 1
Let's see an example program to display the name of the form.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
</head>
<body>
<div id="form-div" style="text-align : center">
<form id="myForm" name="Login Form" action="/https/www.tutorialspoint.com/action_page.php" target="_self">
First name: <input type="text" name="fname" ><br>
Last name: <input type="text" name="lname" ><br>
<input type="submit" value="Submit">
</form>
<p id="form"></p>
</div>
<script>
document.getElementById('form').innerHTML = 'Name of the form : '+document.getElementById('myForm').name;
</script>
</body>
</html>
On executing the above code, the following output is generated.
Example 2
The following is an example program to display the target of the form, which is _self. The form redirects to the same page when the form is submitted.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Target</title>
</head>
<body>
<div id="form-div" style="text-align : center">
<form id="myForm" name="Login Form" action="/https/www.tutorialspoint.com/action_page.php" target="_self">
First name: <input type="text" name="fname" ><br>
Last name: <input type="text" name="lname" ><br>
<input type="submit" value="Submit">
</form>
<p id="form"></p>
</div>
<script>
document.getElementById('form').innerHTML = 'Target of the form : '+document.getElementById('myForm').target;
</script>
</body>
</html>
On executing the above code, the following output is generated.
Example 3
Let's look at an example program to display the target of the form, which is _blank. The form which redirects to a new page when the form is submitted.
<!DOCTYPE html>
<html>
<head>
<title> To find the name and target of a form </title>
</head>
<body>
<div id="form-div" style="text-align : center">
<form id="myForm" name="Login Form for student" action="/https/www.tutorialspoint.com/action_page.php" target="_blank">
First name: <input type="text" name="fname" ><br>
Last name: <input type="text" name="lname" ><br>
<input type="submit" value="Submit">
</form>
<p id="form"></p>
</div>
<script>
document.getElementById('form').innerHTML = 'The name and target values are :'+'<br/>'+'Name of the form : '+ document.getElementById('myForm').name+'<br/>'+'Target of the form : '+document.getElementById('myForm').target;
</script>
</body>
</html>
On executing the above code, the following output is generated.
1K+ Views
