Drop Down Menu That Changes The Name Of A Form Field September 25, 2023 Post a Comment 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="">'); }); });Copy<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>CopySolution 2: If you're using jquery, it's pretty simple: <script> $(function() { $('#DropDownSelection').change(function() { $('#searchbar').attr('name', $('#DropDownSelection').val()); }); }); </script>CopySolution 3: You can set value for each option, and listen to change event on the dropdown:Baca JugaApply A Oil Paint/sketch Effect To A Photo Using JavascriptDiv Extends Beyond Wrapper DivHow To Incorporate A G:link Into An Ordinary Button?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')) })Copy<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>Copy Share You may like these postsHow To Skew From Css For This Shape?How To Use One Icon From Different Image Files?Shortening Html FilesHtml5 Canvas Draw Multiple Rectangles That Move In The Canvas Post a Comment for "Drop Down Menu That Changes The Name Of A Form Field"
Post a Comment for "Drop Down Menu That Changes The Name Of A Form Field"