Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Form target property
The HTML DOM Form target property is used for specifiying where the response should be displayed after the form data has been submitted. It could display in a new tab, current tab or a new window. The form target property set or gets the target attribute value.
Syntax
Following is the syntax for −
Setting the target property −
formObject.target = "_blank|_self|_parent|_top|framename"
Here, _blank will open the response in new window, _self will open the response in the same window; parent will open in the parent frame, _top will open in full window body and framename will open it in a specified named frame.
Example
Let us look at an example of the HTML DOM Form target property −
<!DOCTYPE html>
<html>
<head>
<style>
form {
border:2px solid blue;
margin:2px;
padding:4px;
}
</style>
<script>
function SubmitForm() {
document.getElementById("FORM1").submit();
}
</script>
</head>
<body>
<h1>Form submit() method example</h1>
<form id="FORM1" method="post" action="/sample_page.php">
<label>User Name <input type="text" name="usrN"></label><br><br>
<label>Age<input type="text" name="Age"></label> <br><br>
<input type="button" onclick="SubmitForm()" value="SUBMIT">
</form>
</body>
</html>Output
This will produce the following output. On clicking submit, the response will open in the same window −
On clicking the CHANGE button and then clicking on submit; the response will now be displayed in a new tab −
It contains two input fields with type text and a button named SUBMIT −
<form id="FORM1" method="post" action="/sample_page.php"> <label>User Name <input type="text" name="usrN"></label><br><br> <label>Age<input type="text" name="Age"></label> <br><br> <input type="button" onclick="SubmitForm()" value="SUBMIT"> </form>
We then created a button CHANGE that will execute the changeTarg() method when clicked by the user −
<button onclick="ChangeTarg()">CHANGE</button>
The ChangeTarg() method will get the <form> element using the document object getElementById() method and change its target property value to “_blank”. This allows the response after the form-data has been submitted to display in a new tab. This change is then displayed using some text by assigning the text to paragraph having id “Sample” and using its innerHTML property:
function ChangeTarg() {
document.getElementById("FORM1").target = "_blank";
document.getElementById("Sample").innerHTML = "The target attribute value is now _blank.";
}
164 Views
To Continue Learning Please Login