Drop Down Menu That Changes The Name Of A Form Field

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:

Solution 1:

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="">');
	});
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><formmethod="get"action="/search_results_advanced/"id="keyword">
    Search by:
    <selectid="DropDownSelection"><optionvalue="Name">Name</option><optionvalue="Address">Address</option><optionvalue="Phone">Phone</option></select><divclass="search-by">Search by Name: <inputtype="text"name="Name"value=""></div><inputtype="submit"value="Go!" /></form>

Solution 2:

If you're using jquery, it's pretty simple:

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

Solution 3:

You can set value for each option, and listen to change event on the dropdown:

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.valueconsole.log(input.getAttribute('name'))
})

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

Share