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个数据库中将列命名为“Value”，它存储有关所有这些的所有信息，我想避免这些。

我想，如果我选择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。如果我选择自行车名称，那么它应该是Enter your bike ......依此类推。

更新

我需要的修改很少。选择汽车时，输入名称将更改为car，表单操作将更改为car.php并查询输入您的汽车。但如果我想改变这样的名字那么我该怎么办？当我选择任何说自行车然后表格动作将改为bike.php，但我想输入名称不同说USY并输入你的自行车输入你的序列号我该怎么办？

Answer 1

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

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>

编辑：如果您希望注释中的所有内容都不同，则可以使用对象来保存值。例如，

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

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

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

我在这里使用了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>

这对我来说非常适合享受：）

如何根据html格式的下拉列表选择更改输入名称？

3 个答案: