This blog post concern’s about dynamically changing form action and submit the form data on required action (web page).

Some times there is a need to submit form data to different pages, for this, we must dynamically change form action=” “  .

In our example we have created a simple html form containing Select options field. We applied jQuery’s on change event on it to fulfill above requirement.

As user selects an option, form action gets dynamically set to respective page. Just follow our codes or you can download it to use.

dynamically change form action using jQuery

HTML File: select_action.html

Here, we have created a simple html form with select option field, as user selects an option, script alert is shown.

<!DOCTYPE html>
<html>
<head>
<title>Change Form Action Based on selection - Demo Preview</title>
<meta content="noindex, nofollow" name="robots">
<!-- Include jQuery library and file here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/script.js" type="text/javascript"></script>
<!-- Include CSS file here -->
<link href="css/drop_down.css" rel="stylesheet">
</head>
<body>
<div id="main">
<div id="first">
<h1>Change Form Action Based On Selection</h1>
<form id="myform" method="post" name="myform">
<label>User ID :</label>
<input class="name" type="text">
<label>Password :</label>
<input class="email" type="password">
<label>Database :</label>
<select id="db">
<option>--- Choose Database Here ---</option>
<option>My-Sql</option>
<option>Oracle</option>
<option>MS-Access</option>
</select>
<input class="submit" id="submit" type="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>

 

jQuery File: script.js

We used following jquery code executes on change section. Just copy it to use.

$(document).ready(function() {
// Function to change form action.
$("#db").change(function() {
var selected = $(this).children(":selected").text();
switch (selected) {
case "My-Sql":
$("#myform").attr('action', 'mysql.html');
alert("Form Action is Changed to 'mysql.html'\n Press Submit to Confirm");
break;
case "Oracle":
$("#myform").attr('action', 'oracle.html');
alert("Form Action is Changed to 'oracle.html'\n Press Submit to Confirm");
break;
case "MS-Access":
$("#myform").attr('action', 'msaccess.html');
alert("Form Action is Changed to 'msaccess.html'\n Press Submit to Confirm");
break;
default:
$("#myform").attr('action', '#');
}
});
// Function For Back Button
$(".back").click(function() {
parent.history.back();
return false;
});
});

 

CSS File: drop_down.css

Styling of HTML elements is done by below css.

/* Below line is used for online Google font */
@import "http://fonts.googleapis.com/css?family=Arvo";
h1{
text-align:center
}
h2{
text-align:center;
font-family:'Arvo',serif
}
hr{
border:0;
border-top:1px solid #ccc;
margin-bottom:-10px
}
div#main{
width:868px;
height:654px;
margin:20px auto;
font-family:'Arvo',serif
}
div#first{
width:350px;
height:515px;
padding:0 45px 20px;
box-shadow:0 0 10px;
float:left;
margin-top:55px
}
input{
width:340px;
height:35px;
border:1px solid gray;
padding-left:10px;
margin-top:8px;
border-radius:5px
}
select{
background-image:url(../images/arrow.png);
background-repeat:no-repeat;
background-position:300px;
width:353px;
padding:12px;
margin-top:8px;
font-family:Cursive;
line-height:1;
border-radius:5px;
background-color:#A2AB58;
color:#ff0;
font-size:20px;
-webkit-appearance:none;
box-shadow:inset 0 0 10px 0 rgba(0,0,0,0.6);
outline:none
}
select:hover{
color:#00ff7f
}
.submit{
width:353px;
height:45px;
color:#fff;
margin-top:50px;
background-color:#1067a2;
font-size:20px;
font-weight:700
}
button{
width:353px;
height:45px;
color:#fff;
margin-top:120px;
background-color:#1067a2;
font-size:20px;
font-weight:700;
border-radius:5px
}
.page{
width:720px;
height:260px;
padding:70px 0;
margin:140px auto;
border:3px dashed gray;
text-align:center
}

 

Conclusion:

Thus, we can change form action in this way, keep reading our other blogs.