下拉菜单更改表单域的名称 [英] drop down menu that changes the name of a form field

问题描述

我正在创建高级搜索表单，并希望通过下拉菜单设置文本输入字段的名称。

这是一个简单的搜索表单，其中包含三个单独的字段：

 < form method =getaction =/ search_results_advanced /id =keyword> 
按名称搜寻：< input type =textname =namevalue =/> 
按地址搜索：< input type =textname =addressvalue => 
按电话号码搜索：< input type =textname =phonevalue => 
< input type =submitvalue =Go！ /> 
< / form> 
  

我想要做的是让用户从下拉菜单中选择一个字段，然后有一个文本输入框可以输入搜索词。

例如：

 < form method =getaction =/ search_results_advanced /id =keyword> 
搜寻：
< select id =DropDownSelection> 
< option>名称< / option> 
< option>地址< / option> 
< option>电话< / option> 
< / select> 
< input type =textname =？NAME_FROM_DROPDOWN_SELECTION？ value =id =searchbarsize =25/> 
< input type =submitvalue =Go！ /> 
< / form> 
  

如何使用下拉选项命名文本字段？我试图修改一些JavaScript，我通过谷歌发现，但我恐怕我只是不知道JavaScript，并没有得到任何地方。

感谢您的任何帮助。

我使用jQuery创建的一个示例：

$（document） 。（function）{function（）{$（'body'）。on（'change'，'＃DropDownSelection'，function（）{var v = $（'＃DropDownSelection'）。val（）; $（'。search- ''）;}';'）;}）; < script src =https://ajax.googleapis.com/ajax

I am creating an advanced search form and wish to set the name of a text input field via a drop down menu.

Here is a simple search form with three separate fields:

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

What I'd like to do is have a user select a single field from a drop down and then have a single text input box to enter a search term.

eg:

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

How can I name the text field using the dropdown selection? I tried modifying some javascript I found via google but I'm afraid I just don't know javascript at all and didn't get anywhere.

Thanks for any help.

解决方案

Here is one example I made using jQuery:

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

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

这篇关于下拉菜单更改表单域的名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！