Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.

    Code:
    <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
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Leave the value of "search" blank.

    Create a function that will set the value of "search" to
    Code:
    document.forms["formName"].search1.options[document.forms["formName"].search1.selectedIndex].value + document.forms["formName"].search2.options[document.forms["formName"].search2.selectedIndex].value
    EVERY element in a form is passed when the form is submit, you just have to have the receiving code separate out what you need.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply. I really know very little about javascript. I'm trying to figure it out as I go. I created this and put it in the head tag

    Code:
    <script>
    function myFunction()
    {
    document.forms["sortform"].search1.options[document.forms["sortform"].search1.selectedIndex].value + document.forms["sortform"].search2.options[document.forms["sortform"].search2.selectedIndex].value
    }
    
        </script>

    And added the function to the form like this

    Code:
    <form onSubmit="myFunction" method="GET" action="www.myurl.com">
    and i left the value of search blank like this

    Code:
    <input type="hidden" name="search" value="" />
    But no luck. What am I doing wrong?

  • #4
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I forgot to add that I gave the form and id and name of "sortform"

    Code:
    <form onSubmit="myFunction" name="sortform" id="sortform" method="GET" action="www.myurl.com">

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,735
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Code:
    <form name = "sortform" id = "sortform">
    
    <input type="text" size ="50" id="search" />
    <!-- change to "hidden" after testing -->
    
    <select id="search1" onchange = "makeURL()">
    <option value = "0">Choose A or B</option>
    <option value="a">A</option>
    <option value="b">B</option>
    </select>
    
    <select id="search2" onchange = "makeURL()">
    <option value = "0">Choose 1 or 2</option>
    <option value="1">1</option>
    <option value="2">2</option>
    </select>
    
    <script type = "text/javascript">
    function makeURL() {
    var s1 = document.getElementById("search1").value;
    var s2 = document.getElementById("search2").value;
    // no need for involved selected index syntax
    if (s1 != 0 && s2 !=0) {  // both select lists have option chosen
    var f = (s1 + "+" + s2);
    document.getElementById("search").value = "http://www.myurl.com/?search=" + f;
    }
    }
    
    </script>
    Last edited by Philip M; 09-27-2012 at 05:48 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    The only scenario that justifies doing this, is if you're targeting a server script that you don't control.
    You must warn users that they need script enabled, or they'll soon be doubting your parentage.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
    <noscript>
     <div style='color:#fff;background-color:#f00;text-align:center;font-weight:bold'>
     Please enable JavaScript, or this form will be inoperable.
     </div>
    </noscript>
    <form id='myForm' method="GET" action="http://myurl.com">
    
    <input type="text" size='50' name="search" value="" />
    
     <select id="search1">
      <option value="">Select</option>
      <option value="a">A</option>
      <option value="b">B</option>
     </select>
     
     <select id="search2">
      <option value="">Select</option>
      <option value="1">1</option>
      <option value="2">2</option>
     </select>
     <br>
     <input type = 'submit'>
     </form>
    
    <script type="text/javascript">
    
    (function( theForm )
    {
      theForm.search1.onchange = theForm.search2.onchange = function()
      {
        this.form.search.value = "http://www.myurl.com?search=" + this.form.search1.value + '+' + this.form.search2.value;   
      }
      
      theForm.onsubmit = function()
      {   
        var err = this.search1.selectedIndex < 1 || this.search2.selectedIndex < 1;
        
        if( err )
          alert( 'Must select from both dropdowns' );
        else
          this.search1.selectedIndex = this.search2.selectedIndex = -1;
         
        return !err; 
      }
     
    })( document.getElementById( 'myForm' ) );
    
    </script>
    </body>
    </html>


  •  

    Posting Permissions

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