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

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

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

Share

You may like these posts

• 
  None Jquery Placeholder Fallback?
• 
  Webglcontextcreationerror Event: Is It Triggered Synchronously?
• 
  Natively Set Html Select Element To Its Default Value
• 
  How To Prevent A Background Image Flickering On Change