Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Submit formTarget property
The HTML DOM Input Submit formTarget property sets or returns the formtarget attribute value of a submit button. This property specifies where to display the server response after form submission, effectively overriding the target attribute of the parent form element.
Syntax
Following is the syntax for setting the formTarget property −
submitObject.formTarget = "_blank|_self|_parent|_top|framename"
Following is the syntax for getting the formTarget property −
var target = submitObject.formTarget
Parameters
The formTarget property accepts the following values −
_blank − Opens the response in a new window or tab.
_self − Opens the response in the same frame (default behavior).
_parent − Opens the response in the parent frame.
_top − Opens the response in the full body of the window.
framename − Opens the response in a specified named frame.
Return Value
The formTarget property returns a string representing the target destination where the form response will be displayed.
Example − Basic Usage
Following example demonstrates how to set and get the formTarget property −
<!DOCTYPE html>
<html>
<head>
<title>Submit formTarget Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Submit formTarget Property Example</h2>
<form id="myForm" action="/submit" style="border: 2px solid #4CAF50; padding: 15px; border-radius: 5px;">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" id="submitBtn" value="Submit Form" formtarget="_self">
</form>
<div style="margin-top: 20px;">
<button onclick="changeToNewWindow()">Open in New Window</button>
<button onclick="changeToSameWindow()">Open in Same Window</button>
<button onclick="showCurrentTarget()">Show Current Target</button>
</div>
<p id="result" style="margin-top: 15px; padding: 10px; background-color: #f0f0f0;"></p>
<script>
function changeToNewWindow() {
document.getElementById("submitBtn").formTarget = "_blank";
document.getElementById("result").innerHTML = "Form target changed to: _blank (new window)";
}
function changeToSameWindow() {
document.getElementById("submitBtn").formTarget = "_self";
document.getElementById("result").innerHTML = "Form target changed to: _self (same window)";
}
function showCurrentTarget() {
var currentTarget = document.getElementById("submitBtn").formTarget;
document.getElementById("result").innerHTML = "Current formTarget value: " + currentTarget;
}
</script>
</body>
</html>
This example shows a form with a submit button. The buttons below the form allow you to change the formTarget property and see the current value −
Username: [input field] Email: [input field] [Submit Form] [Open in New Window] [Open in Same Window] [Show Current Target] Current formTarget value: _self
Example − Multiple Submit Buttons
Following example demonstrates using different formTarget values for multiple submit buttons in the same form −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Submit Buttons</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Form with Multiple Submit Options</h2>
<form action="/process" style="border: 2px solid #2196F3; padding: 15px; border-radius: 5px;">
<label for="data">Enter some data:</label>
<input type="text" id="data" name="data" value="Sample data"><br><br>
<input type="submit" value="Submit (Same Window)" formtarget="_self" style="margin: 5px; padding: 8px;">
<input type="submit" value="Submit (New Window)" formtarget="_blank" style="margin: 5px; padding: 8px;">
<input type="submit" value="Submit (Parent Frame)" formtarget="_parent" style="margin: 5px; padding: 8px;">
</form>
<div style="margin-top: 20px;">
<button onclick="showAllTargets()">Show All Button Targets</button>
</div>
<div id="targetInfo" style="margin-top: 15px; padding: 10px; background-color: #f9f9f9;"></div>
<script>
function showAllTargets() {
var buttons = document.querySelectorAll('input[type="submit"]');
var info = "<h3>Submit Button Targets:</h3>";
buttons.forEach(function(button, index) {
info += "<p>Button " + (index + 1) + " (" + button.value + "): " + button.formTarget + "</p>";
});
document.getElementById("targetInfo").innerHTML = info;
}
</script>
</body>
</html>
This example shows how different submit buttons can have different formTarget values, allowing users to choose where the form response opens −
Enter some data: Sample data [Submit (Same Window)] [Submit (New Window)] [Submit (Parent Frame)] [Show All Button Targets] Submit Button Targets: Button 1 (Submit (Same Window)): _self Button 2 (Submit (New Window)): _blank Button 3 (Submit (Parent Frame)): _parent
Browser Compatibility
The formTarget property is supported in HTML5 and works in all modern browsers. It provides fine-grained control over form submission behavior without requiring separate forms for different target destinations.
| Property | Description |
|---|---|
| formTarget | Overrides the form's target attribute for specific submit buttons |
| Introduced | HTML5 (for input elements with type="submit") |
| Default Value | Empty string (inherits from form's target attribute) |
Conclusion
The HTML DOM Input Submit formTarget property provides flexible control over where form responses are displayed. It allows different submit buttons within the same form to target different windows or frames, enhancing user experience without requiring multiple forms. The property accepts standard target values and overrides the form's target attribute when specified.
170 Views
