下拉菜單更改表單域的名稱

我正在創建高級搜索表單，並希望通過下拉菜單設置文本輸入字段的名稱。下拉菜單更改表單域的名稱

下面是三個獨立的領域一個簡單的搜索方式：

<form method="get" action="/search_results_advanced/" id="keyword"> 
    Search by name: <input type="text" name="name" value="" /> 
    Search by address: <input type="text" name="address" value=""> 
    Search by phone number: <input type="text" name="phone" value=""> 
    <input type="submit" value="Go!" /> 
</form>

我想要做的是有一個用戶從下拉菜單中選擇單場下來，然後有一個文本輸入框輸入一個搜索詞。

如：

<form method="get" action="/search_results_advanced/" id="keyword"> 
    Search by: 
    <select id="DropDownSelection"> 
     <option>Name</option> 
     <option>Address</option> 
     <option>Phone</option> 
    </select> 
    <input type="text" name="?NAME_FROM_DROPDOWN_SELECTION?" value="" id="searchbar" size="25" /> 
    <input type="submit" value="Go!" /> 
</form>

我如何命名使用下拉選擇的文本字段？我試圖修改一些JavaScript，我通過谷歌發現，但我恐怕我只是不知道JavaScript，並沒有得到任何地方。

感謝您的任何幫助。

來源

2017-05-24 Fish

你可以包括你嘗試過的JavaScript？ Stackoverflow是用來幫助你解決問題，而不是爲你做，所以你可能有更多的運氣發佈一些代碼。 –

下面是使用jQuery的一個例子，我做：

$(document).ready(function(){ 
 
\t $('body').on('change','#DropDownSelection',function(){ 
 
\t \t var v = $('#DropDownSelection').val(); 
 
\t \t $('.search-by').html('Search by '+v+': <input type="text" name="'+v+'" value="">'); 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form method="get" action="/search_results_advanced/" id="keyword"> 
 
    Search by: 
 
    <select id="DropDownSelection"> 
 
     <option value="Name">Name</option> 
 
     <option value="Address">Address</option> 
 
     <option value="Phone">Phone</option> 
 
    </select> 
 
    <div class="search-by">Search by Name: <input type="text" name="Name" value=""></div> 
 
    <input type="submit" value="Go!" /> 
 
</form>

來源

2017-05-24 21:09:09 threeFatCat

您可以設置value每個option，並聽取change事件的下拉：

var dd = document.getElementById('DropDownSelection'); 
 
var input = document.getElementById('searchbar'); 
 
input.setAttribute('name', 'name'); // default value 
 

 
dd.addEventListener('change', function(e) { 
 
    input.setAttribute('name', e.target.value); // set input.name equal to chosen select.value 
 
    console.log(input.getAttribute('name')) 
 
})

<form method="get" action="/search_results_advanced/" id="keyword"> 
 
    Search by: 
 
    <select id="DropDownSelection"> 
 
     <option value="name">Name</option> 
 
     <option value="address">Address</option> 
 
     <option value="phone">Phone</option> 
 
    </select> 
 
    <input type="text" name="" value="" id="searchbar" size="25" /> 
 
    <input type="submit" value="Go!" /> 
 
</form>

來源

2017-05-24 21:05:18 wostex

如果你使用jQuery，這是很簡單的：

<script> 
    $(function() { 
     $('#DropDownSelection').change(function() { 
      $('#searchbar').attr('name', $('#DropDownSelection').val()); 
     }); 
    }); 
</script>

來源

2017-05-24 21:12:38 Metroids

下拉菜單更改表單域的名稱

回答

相關問題