Results 1 to 2 of 2

Thread: Use Drop down menu w/ description to populate hidden variable

  1. #1
    Join Date
    Apr 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Use Drop down menu w/ description to populate hidden variable

    1) Script Title:
    Drop down menu w/ description

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...bodescribe.htm

    3) Describe problem:

    I found this script, and it does most of what I want; but rather than display the value for a selection in a pulldown, I want to assign that value to a hidden variable.

    So if a user picks a product from the menu, I want to set a hidden variable's value (email address chosen from the specified array.)

    Can I do this?

    _Greg

  2. #2
    Join Date
    Apr 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Just wanted to clarify a bit...in my particular case, the user is selecting a product from the menu.

    Rather than display the text from the array associated with that selection, I want to assign the array element's value to a hidden variable ('assigned_to').

    BTW, I took out the 'onClick' code, as I just want the onChange behavior, and have a separate submit button.

    Hope someone can help....

    Code:
    <!--Example drop down menu 1-->
    
    <form name="form1">
    <select name="select1" size="1" style="background-color:#FFFFD7" onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">
    <option selected value="product-1">Product 1</option>
    <option value="product-2">Product 2</option>
    <option value="product-3">Product 3</option>
    <option value="product-4">Product 4</option>
    <option value="product-5">Product 5</option>
    </select>
    <span id="textcontainer1" align="left" style="font:italic 13px Arial">
    </span>
    <input type="hidden" name="assigned_to" value="" />
    
    </form>
    
    <!--Example drop down menu 2-->
    
    <form name="form2">
    <select name="select2" size="1" style="background-color:#E3FFDF" onChange="displaydesc(document.form2.select2, thetext2, 'textcontainer2')">
    <option selected value="http://www.cnn.com">CNN</option>
    <option value="http://www.msnbc.com">MSNBC</option>
    <option value="http://news.bbc.co.uk">BBC News</option>
    <option value="http://www.theregister.com/">The Register</option>
    </select>
     <input type="button" value="Go" 
    onClick="jumptolink(document.form2.select2)"><br>
    <span id="textcontainer2" align="left" style="font:italic 13px Arial">
    </span>
    </form>
    
    
    
    <!--IMPORTANT: Below script should always follow all of your HTML codes above, and never proceed them-->
    <!--To be safe, just add below script at the end of your page-->
    
    <script type="text/javascript">
    
    /***********************************************
    * Drop down menu w/ description- © Dynamic Drive (www.dynamicdrive.com)
    * This notice must stay intact for use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    //1) CUSTOMIZE TEXT DESCRIPTIONS FOR LINKS ABOVE
    var thetext1=new Array()
    thetext1[0]="bob@example.com"
    thetext1[1]="mary@example.com"
    thetext1[2]="marv@example.com"
    thetext1[3]="mark@example.com"
    thetext1[4]="joe@example.com"
    
    /// You may define additional text arrays if you have multiple drop downs:
    var thetext2=new Array()
    thetext2[0]="CNN- US and World News."
    thetext2[1]="MSNBC- NBC News online."
    thetext2[2]="BBC News- Updated every minute of every day."
    thetext2[3]="TheRegister- Daily IT news."
    
    // Now, see 2) below for final customization step
    
    function displaydesc(which, descriptionarray, container){
    if (document.getElementById)
    document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]
    }
    
    function jumptolink(what){
    var selectedopt=what.options[what.selectedIndex]
    if (document.getElementById && selectedopt.getAttribute("target")=="newwin")
    window.open(selectedopt.value)
    else
    window.location=selectedopt.value
    }
    
    //2) Call function displaydesc() for each drop down menu you have on the page
    //   This function displays the initial description for the selected menu item
    //   displaydesc(name of select menu, name of corresponding text array, ID of SPAN container tag):
    //   Important: Remove the calls not in use (ie: 2nd line below if there's only 1 menu on your page)
    
    displaydesc(document.form1.select1, thetext1, 'textcontainer1')
    displaydesc(document.form2.select2, thetext2, 'textcontainer2')
    
    </script>

Bookmarks

Posting Permissions

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