如何基於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>

這對我來說是完美的享受:)