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
How to Find the action Attribute and method of a Form in JavaScript?
In HTML forms, the action and method attributes control where form data is sent and how it's transmitted. JavaScript provides properties to access and modify these attributes dynamically.
The action attribute specifies the URL where form data should be sent when submitted, while the method attribute determines the HTTP method used for submission (GET, POST, or dialog).
Using the action Property
The action property allows you to get or set the form's action attribute value.
Syntax
// Get action attribute
let actionValue = document.getElementById('formID').action;
// Set action attribute
document.getElementById('formID').action = 'newURL';
Example: Getting the Action Attribute
<!DOCTYPE html>
<html>
<head>
<title>Getting Form Action Attribute</title>
</head>
<body>
<form id="myForm" action="/submit-form" method="post">
<label>Full name: <input type="text" name="fname"></label><br><br>
<label>Email: <input type="email" name="email"></label><br><br>
<input type="submit" value="Submit">
</form>
<p id="result"></p>
<script>
const form = document.getElementById('myForm');
document.getElementById('result').innerHTML =
'Form action: ' + form.action;
</script>
</body>
</html>
Example: Setting the Action Attribute
<!DOCTYPE html>
<html>
<head>
<title>Setting Form Action Attribute</title>
</head>
<body>
<form id="myForm" action="/old-submit" method="post">
<label>Username: <input type="text" name="username"></label><br><br>
<input type="submit" value="Submit">
</form>
<button onclick="changeAction()">Change Action</button>
<p id="result"></p>
<script>
function changeAction() {
const form = document.getElementById('myForm');
form.action = '/new-submit-endpoint';
document.getElementById('result').innerHTML =
'Action changed to: ' + form.action;
}
// Display initial action
document.getElementById('result').innerHTML =
'Current action: ' + document.getElementById('myForm').action;
</script>
</body>
</html>
Using the method Property
The method property gets or sets the HTTP method for form submission.
Syntax
// Get method attribute
let methodValue = document.getElementById('formID').method;
// Set method attribute
document.getElementById('formID').method = 'get';
HTTP Methods
GET method ? Form data is appended to the URL. Data is visible and has length limitations. Default method.
POST method ? Form data is sent in the request body. More secure and supports larger data.
dialog method ? Used when the form is inside a dialog element.
Example: Using GET Method
<!DOCTYPE html>
<html>
<head>
<title>Form with GET Method</title>
</head>
<body>
<form id="searchForm" action="/search" method="get">
<label>Search: <input type="text" name="query" placeholder="Enter search term"></label><br><br>
<input type="submit" value="Search">
</form>
<p id="methodInfo"></p>
<script>
const form = document.getElementById('searchForm');
document.getElementById('methodInfo').innerHTML =
'Form method: ' + form.method.toUpperCase();
</script>
</body>
</html>
Example: Using POST Method
<!DOCTYPE html>
<html>
<head>
<title>Form with POST Method</title>
</head>
<body>
<form id="loginForm" action="/login" method="post">
<label>Username: <input type="text" name="username"></label><br><br>
<label>Password: <input type="password" name="password"></label><br><br>
<input type="submit" value="Login">
</form>
<p id="methodInfo"></p>
<script>
const form = document.getElementById('loginForm');
document.getElementById('methodInfo').innerHTML =
'Form method: ' + form.method.toUpperCase() + ' (secure - data not visible in URL)';
</script>
</body>
</html>
Comparison of Methods
| Method | Data Visibility | Data Limit | Security | Use Case |
|---|---|---|---|---|
| GET | Visible in URL | Limited (~2KB) | Less secure | Search forms, filtering |
| POST | Hidden in request body | No practical limit | More secure | Login forms, data submission |
Conclusion
JavaScript's action and method properties provide easy access to form attributes. Use GET for searches and POST for sensitive data submissions to ensure proper security and functionality.
3K+ Views
