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 object property
The HTML DOM Input Submit object is associated with the <input> element with type="submit". We can create and access an input element with type submit by using the createElement() method and getElementById() method respectively.
The Input Submit object represents a submit button in HTML forms, which is used to submit form data to the server when clicked. This object provides various properties to control the behavior and appearance of the submit button.
Syntax
Following is the syntax for creating an input submit object −
var submitButton = document.createElement("INPUT");
submitButton.setAttribute("type", "submit");
Following is the syntax for accessing an existing input submit object −
var submitButton = document.getElementById("submitId");
Properties
Following are the properties for the Input submit object −
| Property | Description |
|---|---|
| autofocus | Sets or returns whether the submit button should get focus automatically when the page loads. |
| defaultValue | Sets or returns the default value of the submit button. |
| disabled | Sets or returns whether the submit button is disabled. |
| form | Returns a reference to the form containing the submit button. |
| formAction | Sets or returns the formaction attribute value of the submit button. |
| formEnctype | Sets or returns the formenctype attribute value of the submit button. |
| formMethod | Sets or returns the formmethod attribute value of the submit button. |
| formNoValidate | Sets or returns whether form data should be validated when submitted. |
| formTarget | Sets or returns the formtarget attribute value of the submit button. |
| name | Sets or returns the name attribute value of the submit button. |
| type | Returns the form element type for the submit button (always "submit"). |
| value | Sets or returns the value attribute of the submit button (button text). |
Creating Input Submit Object
Example
Following example demonstrates how to create an input submit object dynamically using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Input Submit Object Creation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Submit Object</h2>
<p>Create an input submit button by clicking the below button:</p>
<button onclick="createSubmit()" style="padding: 8px 16px; font-size: 14px;">CREATE SUBMIT BUTTON</button>
<div id="container" style="margin-top: 20px;"></div>
<script>
function createSubmit() {
var submitBtn = document.createElement("INPUT");
submitBtn.setAttribute("type", "submit");
submitBtn.setAttribute("value", "Submit Form");
submitBtn.style.padding = "8px 16px";
submitBtn.style.fontSize = "14px";
document.getElementById("container").appendChild(submitBtn);
}
</script>
</body>
</html>
The output shows a button that creates a submit input when clicked −
Input Submit Object Create an input submit button by clicking the below button: [CREATE SUBMIT BUTTON] After clicking: [CREATE SUBMIT BUTTON] [Submit Form]
Accessing Submit Object Properties
Example
Following example shows how to access and modify properties of an input submit object −
<!DOCTYPE html>
<html>
<head>
<title>Submit Object Properties</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form id="myForm" action="/submit.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" style="margin: 10px;"><br>
<input type="submit" id="submitBtn" value="Submit" name="submitButton">
</form>
<button onclick="showProperties()" style="margin: 20px 0; padding: 8px 16px;">Show Properties</button>
<button onclick="disableSubmit()" style="margin: 20px 5px; padding: 8px 16px;">Disable Submit</button>
<div id="output" style="margin-top: 20px; padding: 10px; background-color: #f0f0f0;"></div>
<script>
function showProperties() {
var submit = document.getElementById("submitBtn");
var output = document.getElementById("output");
output.innerHTML = "<h4>Submit Button Properties:</h4>" +
"<p><strong>Type:</strong> " + submit.type + "</p>" +
"<p><strong>Value:</strong> " + submit.value + "</p>" +
"<p><strong>Name:</strong> " + submit.name + "</p>" +
"<p><strong>Disabled:</strong> " + submit.disabled + "</p>" +
"<p><strong>Form ID:</strong> " + submit.form.id + "</p>";
}
function disableSubmit() {
var submit = document.getElementById("submitBtn");
submit.disabled = true;
submit.value = "Disabled";
}
</script>
</body>
</html>
This example displays the properties of the submit button and demonstrates how to disable it −
Username: [input field] [Submit] [Show Properties] [Disable Submit] After clicking "Show Properties": Submit Button Properties: Type: submit Value: Submit Name: submitButton Disabled: false Form ID: myForm
Form Override Properties
Example
Following example demonstrates the form override properties like formAction, formMethod, and formTarget −
<!DOCTYPE html>
<html>
<head>
<title>Form Override Properties</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form id="testForm" action="/default.php" method="get">
<label for="email">Email:</label>
<input type="email" id="email" name="email" style="margin: 10px;"><br>
<input type="submit" id="normalSubmit" value="Normal Submit">
<input type="submit" id="overrideSubmit" value="Override Submit"
formaction="/override.php" formmethod="post" formtarget="_blank">
</form>
<button onclick="compareSubmits()" style="margin: 20px 0; padding: 8px 16px;">Compare Submits</button>
<div id="comparison" style="margin-top: 20px; padding: 10px; background-color: #f9f9f9;"></div>
<script>
function compareSubmits() {
var normal = document.getElementById("normalSubmit");
var override = document.getElementById("overrideSubmit");
var output = document.getElementById("comparison");
output.innerHTML = "<h4>Submit Button Comparison:</h4>" +
"<p><strong>Normal Submit:</strong></p>" +
"<p>Form Action: " + (normal.formAction || "Uses form default") + "</p>" +
"<p>Form Method: " + (normal.formMethod || "Uses form default") + "</p>" +
"<p><strong>Override Submit:</strong></p>" +
"<p>Form Action: " + override.formAction + "</p>" +
"<p>Form Method: " + override.formMethod + "</p>" +
"<p>Form Target: " + override.formTarget + "</p>";
}
</script>
</body>
</html>
This demonstrates how different submit buttons in the same form can have different behaviors −
Email: [input field] [Normal Submit] [Override Submit] [Compare Submits] After clicking "Compare Submits": Submit Button Comparison: Normal Submit: Form Action: Uses form default Form Method: Uses form default Override Submit: Form Action: /override.php Form Method: post Form Target: _blank
Conclusion
The HTML DOM Input Submit object provides comprehensive control over submit buttons in forms. Its properties allow you to create, modify, and manage submit button behavior dynamically, including form override capabilities that can change how individual buttons submit form data. These properties are essential for building interactive web forms with JavaScript.
208 Views
