Form id myform action url target _top method post base

❮ HTML

Try it Yourself »

Definition and Usage

The action attribute specifies where to send the form-data when a form is submitted.

Browser Support

Attribute action Yes Yes Yes Yes Yes

Syntax

Attribute Values

Value Description URL Where to send the form-data when the form is submitted.

Possible values:

• An absolute URL - points to another web site (like action="http://www.example.com/example.htm")
• A relative URL - points to a file within a web site (like action="example.htm")

❮ HTML

tag

★ +1

We have already explained, how to change form action dynamically using jQuery. Here, we are doing same, but using JavaScript.

Below example consists of an HTML form with a select option field, as user selects an option, form action gets dynamically set to respective page using .action() method of JavaScript.

document.getElementById("form_id").action = action;

---

Where .action() is a method and action is a variable that stores the url to which the action is to be set. Like, action stores url as first.php

---

---

Function, to get selected value from select tag:

function select_change(){  
var z = document.getElementById("form_action").selectedIndex;  
var z1 = document.getElementsByTagName("option")[z].value;  
alert ("Form action changed to "+z1);  
}

To set form action field via JavaScript function:

// Select option value from select tag and storing it in a variable.  
var x = document.getElementById("form_action").selectedIndex;  
var action = document.getElementsByTagName("option")[x].value;  
if(action !== ""){  
document.getElementById("form_id").action = action;  
document.getElementById("form_id").submit();  
}

---

We have also applied JavaScript validation function over form fields. For more learning, just go through our complete HTML and JavaScript codes.

Watch our live demo or download our codes to use it.

---

HTML File: form_action.html

Here, we have created a simple HTML form with select option field, and it’s action attribute is not defined.

  
  
  
  
  
  
  
  
  
  
  
  
Dynamically Change Form Action Using Javascript
  
  
Name :  
  
Email :  
  
Set Form Action :  
  
--- Set Form Action ---  
first.php  
second.php  
third.php  
  
  
  
  
  
  

Javascript File: form_action.js

Given below is our complete JavaScript code.

function select_change() {  
var z = document.getElementById("form_action").selectedIndex;  
var z1 = document.getElementsByTagName("option")[z].value;  
alert("Form action changed to " + z1);  
}  
function myfunction() {  
if (validation()) {  
// Calling Validation function.  
//select option value from select tag and storing it in a variable.  
var x = document.getElementById("form_action").selectedIndex;  
var action = document.getElementsByTagName("option")[x].value;  
if (action !== "") {  
document.getElementById("form_id").action = action;  
document.getElementById("form_id").submit();  
} else {  
alert("Please set form action");  
}  
}  
}  
// Name and Email validation Function.  
function validation() {  
var name = document.getElementById("name").value;  
var email = document.getElementById("email").value;  
var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;  
if (name === '' || email === '') {  
alert("Please fill all fields...!!!!!!");  
return false;  
} else if (!(email).match(emailReg)) {  
alert("Invalid Email...!!!!!!");  
return false;  
} else {  
return true;  
}  
}

CSS File: style.css

Styling of HTML elements.

/* Below line is used for online Google font */  
@import url(http://fonts.googleapis.com/css?family=Raleway);  
h2{  
background-color: 
# FEFFED;  
padding: 30px 35px;  
margin: -10px -50px;  
text-align:center;  
border-radius: 10px 10px 0 0;  
}  
.back{  
font-size: 14px;  
padding: 5px 15px;  
text-decoration: none;  
color: white;  
background-color: rgb(34, 128, 172);  
border-radius: 3px;  
border: 1px solid rgb(9, 78, 133);  
}  
hr{  
margin: 10px -50px;  
border: 0;  
border-top: 1px solid 
# ccc;  
margin-bottom: 40px;  
}  
div.container{  
width: 900px;  
height: 610px;  
margin:35px auto;  
font-family: 'Raleway', sans-serif;  
}  
div.main{  
width: 300px;  
padding: 10px 50px 25px;  
border: 2px solid gray;  
border-radius: 10px;  
font-family: raleway;  
float:left;  
margin-top:30px;  
}  
input[type=text],select{  
width: 95%;  
height: 25px;  
padding: 5px;  
margin-bottom: 25px;  
margin-top: 5px;  
border: 2px solid 
# ccc;  
color: 
# 4f4f4f;  
font-size: 16px;  
border-radius: 5px;  
}  
select{  
width: 100%;  
height:40px;  
font-family:cursive;  
font-size: 20px;  
}  
label{  
color: 
# 464646;  
text-shadow: 0 1px 0 
# fff;  
font-size: 14px;  
font-weight: bold;  
}  
input[type=button]{  
font-size: 16px;  
background: linear-gradient(
# ffbc00 5%, 
# ffdd7f 100%);  
border: 1px solid 
# e5a900;  
color: 
# 4E4D4B;  
font-weight: bold;  
cursor: pointer;  
width: 100%;  
border-radius: 5px;  
margin-bottom:10px;  
padding: 10px 0;  
}  
input[type=button]:hover{  
background: linear-gradient(
# ffdd7f 5%, 
# ffbc00 100%);  
}

Conclusion:

Thus, we can change form action using JavaScript in this way, hope you have liked it. Keep reading our other blogs for getting coding tricks.

What is form action method post?

The method attribute of the form element tells the web browser how to send form data to a server. Specifying a value of POST means the browser will send the data to the web server to be processed.

What is action method target in HTML?

action is where the data is sent, target is which window (or tab, frame, iframe) to use for the request. If action is omitted, it assumed to be the current page (the same URL). If target is omitted, it is assumed to be the same window (or tab). Using target="_blank" always opens in a new window (or tab, frame, iframe).

How to send form data using POST method?

To post HTML form data to the server in URL-encoded format, you need to make an HTTP POST request to the server and provide the HTML form data in the body of the POST message in key=value format. You must also specify the data type using the Content-Type: application/x-www-form-urlencoded request HTTP header.

Which method will send form data via the URL?

The form-data can be sent as URL variables (with method="get" ) or as HTTP post transaction (with method="post" ). Notes on GET: Appends form-data into the URL in name/value pairs.