www.webdeveloper.com
Results 1 to 4 of 4

Thread: Put values from 2 select drop downs into one input with javascript

  1. #1
    Join Date
    Sep 2012
    Posts
    1

    Put values from 2 select drop downs into one input with javascript

    Hello,

    I need to make a form that can create a URL like the one below. I need to have two drop down boxes that get their selected values entered into another input with a + sign between them. I want to do this with javascript. I think the example below explains it. It seems like it should be simple, but I have very little experience with javascript. Thanks for your help.

    This is what I want the form to do http://www.myurl.com?search=a+1

    Here is the example form and what I need it to do.

    <form method="GET" action="www.myurl.com">

    <input type="hidden" name="search" value="search1+search2" />

    <select name="search1">
    <option value="a">A</option>
    <option value="b">B</option>
    </select>

    <select name="search2">
    <option value="1">1</option>
    <option value="2">2</option>
    </select>

    </form>

    As the url example shows, I don't want the form to pass the values from search1 or search2, only the value from the search input.

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,125
    Here's a jQuery solution:
    http://jsfiddle.net/dfreema1/LsgAb/
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  3. #3
    Join Date
    Mar 2009
    Posts
    452
    <form method="GET" action="http://www.myurl.com" onsubmit="alert(action+'?'+search1.value+'+'+search2.value);return false;">

    <input type="hidden" name="search" value="search1+search2" />

    <select name="search1">
    <option value="a">A</option>
    <option value="b">B</option>
    </select>

    <select name="search2">
    <option value="1">1</option>
    <option value="2">2</option>
    </select>
    <input type="submit">

    </form>

  4. #4
    Join Date
    Nov 2010
    Posts
    1,084
    Code:
    <form method="GET" action="www.myurl.com">
    <input type="hidden" name="search" value="search1+search2" />
    <input type="button" value="submit" onclick="getVals(this.form)"/>
    </form>
    
    <select id="search1">
    <option value="a">A</option>
    <option value="b">B</option>
    </select>
    
    <select id="search2">
    <option value="1">1</option>
    <option value="2">2</option>
    </select>
    
    <script type="text/javascript">
    function getVals(frm){
    frm.search.value=document.getElementById('search1').value+"+"+document.getElementById('search2').value;
    frm.submit()
    }
    </script>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles