如何基于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 （ 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 。 如果我选择“自行车名称”，则应为“ Enter your bike ...”，依此类推。

UPDATE

我需要一点修改。 选择汽车时，输入名称将更改为car，表单操作将更改为car.php，并查询输入您的汽车。 但是，如果要更改名称，该怎么办？ 当我选择任何内容时，说出Bike，然后将表单操作更改为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

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

这对我来说是完美的享受:)