如何根据 html 表单中的下拉选择更改输入名称？

Question

我有一个 HTML 表单，它根据下拉选择更改其表单操作，但输入名称保持不变。

这是我的 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>

如果我选择Car Name 并输入Maruti，那么值是这样传递的：

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

如果我选择Bike Name 并输入Honda 然后值是这样传递的：

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

---

我的问题是我必须在所有 5 个数据库中将该列命名为“值”，该数据库存储有关这一切的所有信息，这是我想避免的。

我想要，如果我选择 Car Name 并输入 Maruti 那么值应该像这样传递

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

如果我选择Bike Name 并输入Honda 那么值应该像这样传递

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

---

为了实现这个目标应该对代码进行哪些更改？

如果这也能发生，那很好，否则没问题。

写成Enter your query。我希望在这里发生同样的变化。如果我选择汽车名称，那么它应该是Enter you car。如果我选择 Bike Name，那么它应该是 Enter your bike... 等等。

更新

我需要一点修改。选择汽车时，输入名称更改为汽车，表单操作更改为 car.php 并查询输入您的汽车。但是，如果我想像这样更改名称，那我该怎么办？当我选择任何说自行车时，表单操作将更改为bike.php，但我希望输入名称不同，例如USY并输入您的自行车以输入您​​的序列号。我该怎么办？

Answer 1

我现在已经更新了代码并得到了你的确切要求，我希望这会对你有所帮助

<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>

Answer 2

我建议您不要使用嵌入到 HTML 属性中的 JavaScript。除此之外，您可以在修改操作的同一 change 处理程序中更改名称属性。

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>

编辑：如果您希望一切都像 cmets 中所说的那样不同，您可以使用一个对象来保存这些值。例如，

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

然后不是直接使用选项的值，而是根据所选选项从该对象中拉取。

Answer 3

<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>

我在这里使用了jquery，在html中做了一些改动，试试这个

<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>

对于 Jquery，你可以使用这个

<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>

这对我来说非常适合享受:)