How to find the action attribute and method of a form in JavaScript?


In this article we are going to learn how to find the action attribute and method of a form with suitable examples in JavaScript.

In HTML, there is <form> element which has few attributes: input, label, text area, select, name, target. The action and method attributes of the form are used to return those values. The action attribute also specifies where to send the form data when form is submitted.

To get a better idea of this concept, let’s look into the examples where we achieved the given task using action attribute and also with method attribute.

Using action attribute

The JavaScript action attribute will specify what to perform when a form is submitted.

Syntax

The syntax to display the action attribute of the form is shown below.

document.getElementById('formID').action;

We can set or get the value of action attribute in the form. The action attribute specifies what to perform when a form is submitted. The URL is provided as a value inside the action attribute. The URL can be an absolute URL (which includes the domain name) or relative URL (which refers a file within a website).

Example 1

The following is an example program to display the action attribute of a method.

<!DOCTYPE html>
<html>
<head>
   <title>To find the action attribute and method of a form in JavaScript </title>
</head>
<body>
   <div id="form-div" style="text-align : center">
      <form id="myForm" name="Login Form" action="https://www.tutorialspoint.com/index.htm" target="_self">
         Full name: <input type="text" name="fname" ><br>
         password: <input type="password" name="password" ><br>
         <input type="submit" value="Submit">
      </form>
      <p id="form"></p>
   </div>
   <script>
      document.getElementById('form').innerHTML = 'The value of the action attribute is : '+document.getElementById('myForm').action;
   </script>
</body>
</html>

On executing the above code, the following output is generated.

Example 2

The following is an example program to set the value for action attribute of a form.

<!DOCTYPE html>
<html>
<head>
   <title>To find the action attribute and method of a form in JavaScript </title>
</head>
<body>
   <div id="form-div" style="text-align : center">
      <form id="myForm" name="Login Form" action="https://www.tutorialspoint.com/index.htm" target="_self">
         Full name: <input type="text" name="fname" ><br>
         password: <input type="password" name="password" ><br>
         <input type="submit" value="Submit">
      </form>
      <p id="form"></p>
   </div>
   <script>
      document.getElementById('myForm').action = 'https://www.tutorialspoint.com/codingground.htm';
      document.getElementById('form').innerHTML = 'The value of the action attribute is changed to : 'document.getElementById('myForm').action;
   </script>
</body>
</html>

On executing the above code, the following output is generated.

Using the method attribute

The syntax to display the method attribute of the form is shown below.

Document.getElementById('formID').method;

The HTTP method to submit the form. The possible method values are post, get and dialog.

  • get method − This is the default method. The form data is attached to the URL inside the action and the form data that is submitted is visible to the users. It is not secure.

  • post method − The form data is attached to the HTTP request body and the form data that is submitted is not visible to the users.

  • dialog method − Here, the form is inside a dialog.

Example 1

Let us look at an example program to display the use of get method.

<!DOCTYPE html>
<html>
<head>
   <title>To find the action attribute and method of a form in JavaScript </title>
</head>
<body>
   <div id="form-div" style="text-align : center">
      <form id="myForm" name="Login Form" action="/newPage.htm/" method="get" target="_self">
         Full name: <input type="text" name="fname" placeholder="Enter Full name"><br>
         password: <input type="password" name="password" placeholder="Enter password" ><br>
         <input type="submit" value="Submit">
      </form>
      <p id="form"></p>
   </div>
   <script>
      document.getElementById('form').innerHTML = 'The value of the method attribute is : '+document.getElementById('myForm').method;
   </script>
</body>
</html>

On executing the above code, the following output is generated.

On clicking the submit button, the below output is generated. The name and password are visible using the get method.

Example 2

The following is an example program to display the use of the post method.

<!DOCTYPE html>
<html>
<head>
   <title>To find the action attribute and method of a form in JavaScript </title>
</head>
<body>
   <div id="form-div" style="text-align : center">
      <form id="myForm" name="Login Form" action="/newPage.htm/" method="post" target="_self">
         Full name: <input type="text" name="fname" placeholder="Enter Full name"><br>
         password: <input type="password" name="password" placeholder="Enter password" ><br>
         <input type="submit" value="Submit">
      </form>
      <p id="form"></p>
   </div>
   <script>
      document.getElementById('form').innerHTML = 'The value of the method attribute is : '+document.getElementById('myForm').method;
   </script>
</body>
</html>

On executing the above code, the following output is generated.

On clicking the submit button, the below output is generated. The form data is not visible to the users using post method.

Updated on: 08-Dec-2022

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements