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 formMethod property
The HTML DOM Input Submit formMethod property sets or returns the value of the formmethod attribute of a submit button. This property specifies which HTTP method should be used when sending form data to the server and overrides the method attribute of the parent <form> element.
Syntax
Following is the syntax for setting the formMethod property −
submitObject.formMethod = "get|post"
Following is the syntax for returning the formMethod property −
var method = submitObject.formMethod
Property Values
The formMethod property accepts the following values −
get − The default method that appends form data to the URL as query parameters (e.g.,
URL?name=value&name=value). Data is visible in the URL and has size limitations.post − Sends form data as an HTTP POST transaction in the request body. Data is not visible in the URL and has no size limitations.
Return Value
The formMethod property returns a string representing the HTTP method ("get" or "post") used for form submission.
Example − Setting formMethod Property
Following example demonstrates how to change the formMethod property of a submit button −
<!DOCTYPE html>
<html>
<head>
<title>Submit formMethod Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Submit formMethod Property Example</h2>
<form id="myForm" action="/submit.php" method="get" style="border: 2px solid green; padding: 15px; margin: 10px 0;">
<label>Username: <input type="text" name="username" value="john"></label><br><br>
<label>Location: <input type="text" name="location" value="NYC"></label><br><br>
<input type="submit" id="submitBtn" formmethod="post" value="Submit Form">
</form>
<p>Click the button below to change the submit button's formMethod from POST to GET:</p>
<button onclick="changeMethod()">Change to GET Method</button>
<p id="result"></p>
<script>
function changeMethod() {
document.getElementById("submitBtn").formMethod = "get";
document.getElementById("result").innerHTML = "The formMethod has been changed from POST to GET";
}
</script>
</body>
</html>
Initially, the submit button uses the POST method. After clicking "Change to GET Method", the formMethod property is changed to GET −
Submit formMethod Property Example [Username: john ] [Location: NYC ] [Submit Form] Click the button below to change the submit button's formMethod from POST to GET: [Change to GET Method] After clicking: The formMethod has been changed from POST to GET
Example − Getting formMethod Property
Following example shows how to retrieve the current formMethod value −
<!DOCTYPE html>
<html>
<head>
<title>Get formMethod Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Display formMethod Property</h2>
<form action="/process.php" style="border: 2px solid blue; padding: 15px; margin: 10px 0;">
<label>Email: <input type="email" name="email" value="user@example.com"></label><br><br>
<input type="submit" id="postSubmit" formmethod="post" value="Submit via POST">
<input type="submit" id="getSubmit" formmethod="get" value="Submit via GET">
</form>
<button onclick="showMethods()">Show Form Methods</button>
<p id="output"></p>
<script>
function showMethods() {
var postMethod = document.getElementById("postSubmit").formMethod;
var getMethod = document.getElementById("getSubmit").formMethod;
document.getElementById("output").innerHTML =
"POST Submit Button Method: " + postMethod + "<br>" +
"GET Submit Button Method: " + getMethod;
}
</script>
</body>
</html>
This example displays the formMethod values of both submit buttons −
Display formMethod Property
[Email: user@example.com]
[Submit via POST] [Submit via GET]
[Show Form Methods]
After clicking: POST Submit Button Method: post
GET Submit Button Method: get
GET vs POST Methods
Following table compares the GET and POST methods −
| GET Method | POST Method |
|---|---|
| Appends data to URL as query parameters | Sends data in the HTTP request body |
| Data is visible in the URL | Data is hidden from the URL |
| Has size limitations (typically ~2048 characters) | No size limitations |
| Can be bookmarked and cached | Cannot be bookmarked, not cached by default |
| Less secure for sensitive data | More secure for sensitive data |
| Idempotent (safe to repeat) | Non-idempotent (may cause side effects) |
Browser Compatibility
The formMethod property is supported in all modern browsers. It was introduced in HTML5 and is available in:
Chrome 10+
Firefox 4+
Safari 5.1+
Internet Explorer 10+
Opera 11+
Conclusion
The HTML DOM Input Submit formMethod property provides a way to dynamically control the HTTP method used for form submission. It allows individual submit buttons to override the form's default method attribute, giving developers flexibility in handling different submission scenarios within the same form.
185 Views
