How do I change the name of the entry according to the drop-down selection in html form?

advertisements

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 ?


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>