1

I have a HTML form which changes its form action based on the drop down selection but input name remains same.

Here is my HTML:

<form action="car.php" method="GET">
Select Your Option :
<select onChange="this.form.action=this.options[this.selectedIndex].value;">
      <option value='car.php'>Car Name</option>
      <option value='bike.php'>Bike Name</option>
      <option value='laptop.php'>Laptop Name</option>
      <option value='place.php'>Place Name</option>
      <option value='mobile.php'>Mobile Name</option>
    </select>
Enter your query                 // I want to change this also
<input id="Value" name="Value" type="text">
<button id="submit" type="submit" value="Submit">Submit Query</button>

If I select Car Name and enter Maruti then value is passed like this:

http://www.mywebsite.com/car.php?Value=Maruti

If I select Bike Name and enter Honda then value is passed like this :

http://www.mywebsite.com/bike.php?Value=Honda

My problem is I have to name the column as "Value" in all the 5 database which stores all the information regarding all this, which I want to avoid.

I want, If I select Car Name and enter Maruti then value should pass like this 

http://www.mywebsite.com/car.php?car=Maruti

If I select Bike Name and enter Honda then value should pass like this 

http://www.mywebsite.com/bike.php?bike=Honda

What changes should be made in the code to achieve this goal?

If this can also happen then its very nice otherwise no problem.

In the form it is written Enter your query. I want the same change to happen here. If I select Car Name then it should be Enter you car. If I select Bike Name then it should be Enter your bike... and so on.

UPDATE

Little modification I need. When selecting car, the input name is changing to car, the form action is changing to car.php and query to Enter your car. But If I want to change the name like this then what should I do? When I will select anything say bike then form action will be changed to bike.php, But I want input name to be different say USY and Enter your bike to Enter your Serial No. What should I do ?

Improve this question

3 Answers 3

Reset to default
1

I have updated the code now and got ur exact requirement now and i hope this will help you

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>


<script type="text/javascript">
        $(document).ready(function(){
            $("select").change(function(){
                var str=$(this).val(); // On Change get the option value
                $("form").attr("action",str);
                var res=str.split(".");
                $("#input1").attr("name",res[0]);
                $(".title").html("Enter your "+res[0]+" Name."); // Add this below  $("input").attr("name",res[0]); 
                if(res[0]=='bike')
                {
                    var title2="XYZ";
                    var title3="Serial No";                 
                }
                else if(res[0]=='laptop')
                {
                    var title2="ABC";
                    var title3="Model No";                  
                }
                else if(res[0]=='place')
                {
                    var title2="KLM";
                    var title3="Area";                  
                }
                else if(res[0]=='mobile')
                {
                    var title2="FGH";
                    var title3="Brand";                 
                }
                $("#input2").attr("name",title2);
                $("#input3").attr("name",title3);
                $(".title2").html("Enter your "+title3);

            });             
        });         
    </script>
    <form action="car.php" method="GET">
Select Your Option :
<select value="car.php">
      <option value='car.php'>Car Name</option>
      <option value='bike.php'>Bike Name</option>
      <option value='laptop.php'>Laptop Name</option>
      <option value='place.php'>Place Name</option>
      <option value='mobile.php'>Mobile Name</option>
    </select>
<span class="title2">Enter your Color</span> 
<input name="WER" id="input2" type="text">
<button id="submit" type="submit" value="Submit">Submit Query</button>
</form>
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

You didn't understood my question... I don't need 2 more input field... When I will select the car... the form action will be car.php, the query will be "Enter your Color", input Id will be WER, if I will give green then URL will look like this mywebsite.com/car.php?WER=green, for bike.... form action bike.php, "Enter your Serial No" , input id will be XYZ, so if entered 2002 then the URL will look like this mywebsite.com/car.php?XYZ=2002 and so on...
Did you understand my question ? I will explain it again if you donot understood...
Bro... you still didn't understand my question... I don't want 2 input field... for ex- when I will select car. There should not be two input field like "Enter your car name " and "Enter your color". There should be only 1 " Enter your color". Let I enter green then URL should look like this mywebsite.com/car.php?WER=green because in my database the column which contains the color is named WER.
Ohh sorry remove the second input box alone already I GOT THE ANSWER unwantedly placed the second input box
Then remove the first input field thats it problem is over
|
1

I advise you to not use JavaScript embedded into HTML attributes. Other than that, you can change the name attribute in the same change handler where you're modifying the action.

document.getElementById('Type').addEventListener('change', function(evt) {
  var type = this.selectedOptions[0].value;
  console.dir(this);
  document.getElementById('Value').setAttribute('name', type);
  document.getElementById('QueryName').textContent = type;
  this.form.action = type + ".php";
});
<form action="car.php" method="GET">
Select Your Option :
<select id="Type">
      <option value='car' selected>Car Name</option>
      <option value='bike'>Bike Name</option>
      <option value='laptop'>Laptop Name</option>
      <option value='place'>Place Name</option>
      <option value='mobile'>Mobile Name</option>
    </select>
Enter your <span id="QueryName">car</span>
<input id="Value" name="car" type="text">
<button id="submit" type="submit" value="Submit">Submit Query</button>

EDIT: If you want everything to be different as said in comments, you can use an object to hold the values. For example,

var setup = {
  car: {
    action: 'mycar.php',
    param: 'DFS',
    query: 'color'
  },
  ...
};

and then instead of directly using the option's value, pull from this object based on the selected option.

Improve this answer

8 Comments

This code is not working. Everytime mywebsite.com/car.php is getting selected...
Also what the code is doing right now, your code also want to do the same thing. What I want to achieve is not there !
Use the inspector to see that, in fact, it is not true that car.php is selected (but also laptop.php, if Laptop Name is selected). Additionally, note that the name="car" also changes (into, say, name="laptop"). I admit I overlooked the "Enter your ..." part; I will fix it in a minute.
Thank you for your answer. Your code is working according to my question.... Little modification I need is.... when selecting car, the input name is changing to car, the form action is changing to car.php and query to Enter your car.... But If I want to change the name like this then what should I do....? when I will select anything say bike then form action will be changed to bike.php or I can change it from value field to whatever I want... that I will change according to the file... but I want input name to be different say USY and Enter your bike to Enter your Serial No... what should I do
In you code you have made it to change input name , form action and Enter your [query] by the same name, car or bike etc.... But I want all to be different for all... like when car selected, the form action should be mycar.php, input name should be , DFS and query should be Enter your Color and so on... please help
|
0 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("select").change(function(){
				var str=$(this).val(); // On Change get the option value
				$("form").attr("action",str);
				var res=str.split(".");
				$("input").attr("name",res[0]);
			});				
		});			
	</script>
<!DOCTYPE html>
<html>
<head>
	<title></title>
	
</head>
<form action="car.php" method="GET">
Select Your Option :
<select value="car.php">
      <option value='car.php'>Car Name</option>
      <option value='bike.php'>Bike Name</option>
      <option value='laptop.php'>Laptop Name</option>
      <option value='place.php'>Place Name</option>
      <option value='mobile.php'>Mobile Name</option>
    </select>
Enter your query                 // I want to change this also
<input id="Value" name="car" type="text">
<button id="submit" type="submit" value="Submit">Submit Query</button>
</form>
</html>

I have used jquery here some few changes in html try it out this one

<form action="car.php" method="GET">
Select Your Option :
<select value="car.php">
      <option value='car.php'>Car Name</option>
      <option value='bike.php'>Bike Name</option>
      <option value='laptop.php'>Laptop Name</option>
      <option value='place.php'>Place Name</option>
      <option value='mobile.php'>Mobile Name</option>
    </select>
Enter your query                 // I want to change this also
<input id="Value" name="car" type="text">
<button id="submit" type="submit" value="Submit">Submit Query</button>
</form>

And for Jquery you can use this one

<script type="text/javascript">
        $(document).ready(function(){
            $("select").change(function(){
                var str=$(this).val(); // On Change get the option value
                $("form").attr("action",str);
                var res=str.split(".");
                $("input").attr("name",res[0]);
            });             
        });         
    </script>

This works perfectly for me Enjoy :)

Improve this answer

12 Comments

You code is not working. Everything is passed to car.php and value is changing to car for all the options. Like this If I enter 3 then mywebsite.com/car,php?car=3 for all the options
Enter you query is still not changing. I have added some update to question. Please change the code accordingly....
$(".title").html("Enter your "+res[0]+" Name."); // Add this below $("input").attr("name",res[0]); and <span class="title">Enter your Car Name</span> <!-- Replace Enter Your Query with <span class="title">Enter your Car Name</span> -->
I have updated the question but you are not changing that in your code !
UPDATE Little modification I need. When selecting car, the input name is changing to car, the form action is changing to car.php and query to Enter your car. But If I want to change the name like this then what should I do? When I will select anything say bike then form action will be changed to bike.php, But I want input name to be different say USY and Enter your bike to Enter your Serial No. What should I do ?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.