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 type Property
The HTML DOM Input Submit type property is associated with input elements having type="submit". This property is read-only and always returns the string "submit" for submit button elements. It helps identify the type of input element programmatically in JavaScript.
The submit type property is useful when you need to verify or distinguish between different input types in forms, especially when working with multiple input elements dynamically.
Syntax
Following is the syntax for the submit type property −
submitObject.type
Return Value
The property returns a string value "submit" representing the type of the input element.
Example − Getting Submit Input Type
Following example demonstrates how to get the type of a submit input element −
<!DOCTYPE html>
<html>
<head>
<title>Input Submit Type Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Input Submit Type Property</h2>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<input type="submit" id="submitBtn" value="Submit Form">
</form>
<br>
<p>Click the button below to get the type of the submit input:</p>
<button type="button" onclick="getSubmitType()">Get Submit Type</button>
<p id="result"></p>
<script>
function getSubmitType() {
var submitElement = document.getElementById("submitBtn");
var inputType = submitElement.type;
document.getElementById("result").innerHTML = "The type of the submit input is: " + inputType;
}
</script>
</body>
</html>
The output shows a form with a submit button. Clicking "Get Submit Type" displays the type property −
Input Submit Type Property Username: [text input field] [Submit Form button] Click the button below to get the type of the submit input: [Get Submit Type button] After clicking: The type of the submit input is: submit
Example − Comparing Different Input Types
Following example shows how to distinguish between different input types including submit −
<!DOCTYPE html>
<html>
<head>
<title>Comparing Input Types</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Form with Different Input Types</h2>
<form>
<input type="text" id="textInput" placeholder="Text Input"><br><br>
<input type="email" id="emailInput" placeholder="Email Input"><br><br>
<input type="submit" id="submitInput" value="Submit">
<input type="reset" id="resetInput" value="Reset">
</form>
<br>
<button type="button" onclick="showAllTypes()">Show All Input Types</button>
<div id="output"></div>
<script>
function showAllTypes() {
var textType = document.getElementById("textInput").type;
var emailType = document.getElementById("emailInput").type;
var submitType = document.getElementById("submitInput").type;
var resetType = document.getElementById("resetInput").type;
var result = "<h3>Input Types:</h3>";
result += "<p>Text Input Type: " + textType + "</p>";
result += "<p>Email Input Type: " + emailType + "</p>";
result += "<p>Submit Input Type: " + submitType + "</p>";
result += "<p>Reset Input Type: " + resetType + "</p>";
document.getElementById("output").innerHTML = result;
}
</script>
</body>
</html>
This example demonstrates that each input element returns its specific type value, with the submit input consistently returning "submit" −
Form with Different Input Types [Text Input field] [Email Input field] [Submit button] [Reset button] After clicking "Show All Input Types": Input Types: Text Input Type: text Email Input Type: email Submit Input Type: submit Reset Input Type: reset
Example − Dynamic Form Validation
Following example shows a practical use case where the type property helps in form validation −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Form Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Form Validation Example</h2>
<form id="myForm">
<input type="text" name="name" placeholder="Your Name" required><br><br>
<input type="email" name="email" placeholder="Your Email" required><br><br>
<input type="submit" id="submitBtn" value="Submit" onclick="validateForm(event)">
</form>
<p id="message"></p>
<script>
function validateForm(event) {
var submitButton = document.getElementById("submitBtn");
if (submitButton.type === "submit") {
event.preventDefault(); // Prevent actual form submission for demo
document.getElementById("message").innerHTML =
"<span style='color: green;'>Form validated! Submit button type confirmed: " +
submitButton.type + "</span>";
}
}
</script>
</body>
</html>
In this example, the script checks if the clicked element is indeed a submit button before processing the form −
Form Validation Example [Your Name input field] [Your Email input field] [Submit button] After clicking Submit: Form validated! Submit button type confirmed: submit (in green)
Key Points
Following are the important points about the HTML DOM Input Submit type property −
-
The property is read-only and cannot be modified.
-
It always returns the string
"submit"for submit input elements. -
Useful for programmatically identifying input element types in JavaScript.
-
Commonly used in form validation and dynamic form handling.
-
Can be used to distinguish between different button types (submit, reset, button).
Conclusion
The HTML DOM Input Submit type property provides a reliable way to identify submit buttons programmatically. It always returns "submit" and is essential for form validation, dynamic form handling, and distinguishing between different input types in JavaScript applications.
155 Views
