Skip to main content

Dynamically Change Form Action Based on Select Option

Today, We want to share with you Dynamically Change Form Action Based on Select Option.In this post we will show you Jquery to change form action, hear for jquery change form method we will give you demo and example for implement.In this post, we will learn about jquery change form action url before submit with an example.

Dynamically Change Form Action Based on Select Option

There are the Following The simple About Dynamically Change Form Action Based on Select Option Full Information With Example and source code.

As I will cover this Post with live Working example to develop jquery set form action dynamically, so the Dynamic route path in form action based on the selected option for this example is following below.

Also Read :  PHP Check duplicated value in array Example

Step 1: Include Libs

Add Live jQuery libs.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Step 2 : HTML Part

HTML select Box Change form action using jquery

<form id="findProducts" method="post">
<select  id="listProducts" >
<option>Select</option>
<option>Product</option>
<option>Items</option>
<option>SubCat</option>
</select><br>
<input type="text" class="form-control" placeholder="Search Any Product" >
<input id="submit" type="submit" class="submit" value="Submit" />
</form>

Step 3: jQuery Part

simple changing action attribute of form to product.php

  
   <script>
  $(document).ready(function(){
   $("#listProducts").change(function(){
   var url =  $(this).children(":selected").text(); //get the selected option value
   switch (url) 
  {
   case "Product":
   $("#findProducts").attr('action','product.php');
   //changing action attribute of form to product.php
   break;
   case "Items":
   $("#findProducts").attr('action','items.php');
   break;
   case "SubCat":
   $("#findProducts").attr('action','subcat.php');
   break;
   default:
       $("#findProducts").attr('action', '#');
   }
   }); 
 }); 
 </script>

Angular 6 CRUD Operations Application Tutorials

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

Also Read :  PHP Laravel 5.7 insert update delete in MySQL Example

I hope you get an idea about Dynamically Change Form Action Based on Select Option.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Gondaliya Jaydeep

Hi, I’m Jaydeep Gondaliya, PHP developer.Pakainfo.com is the most popular Programming & Web Development blog. Our mission is to provide the best online resources on programming and web development.Any visitors of this site are free to browse our tutorials, live demos, Examples and download scripts.If you have a project that you want to get started, launch quickly, contact me. Email : [email protected]