SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Skills to Pay the Bills Sparkie's Avatar
    Join Date
    Jul 1999
    Location
    A cave with 47 computers and an internet feed
    Posts
    3,559
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dropdown Menu without Submit button

    Hey guys,

    I'm trying to make a dropdown box in Javascript that doesn't need a submit button. Easy enough, right? Well, the only difference with this one is that I want the links inside to go to a location within the same page.

    But I keep getting an error in this code: Line 47 - Character 1 - Object Expected. That tells me absolutely nothing! What about you? Can you tell me what's wrong with the code?

    The stuff before the HEAD tags is
    Code:
    <script type="text/javascript">
    <!--
    function goToAnchor(form) {
     var f = form.anchorList;
     var selectedAnchor = f.options[f.selectedIndex].value;
     return location.href = selectedAnchor;
    }
    //-->
    </script>
    The stuff within the BODY tag is
    Code:
     <form>
    <select name="anchorList" onchange="goToAnchor(this.form)">
    <option value="javascript:void(0)" selected>This is a test...</option>
    <option value="#link1">Link 1</option>
    <option value="#link2">Link 2</option>
    <option value="#link3">Link 3</option>
    </select>
    </form>
    Your help is much appreciated
    Sherice Jacob - Web Improvement Expert
    Improve Website Conversions | eBook Covers
    Follow Me on Twitter!

  2. #2
    SitePoint Wizard Defender1's Avatar
    Join Date
    Apr 2001
    Location
    My Computer
    Posts
    2,808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    don't suppose you've tried
    Code:
    return document.location.href = selectedAnchor;
    Defender's Designs
    I'm Getting Married!

    Not-so-patiently awaiting Harry Potter Book 7 *sigh*

  3. #3
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    location is a variable of window, not document. As for your problem, don't use the # in front of the anchor, just use the anchor's name.

    EDIT: On second look I think I'd change the code a little:

    Code:
    <script type="text/javascript">
    <!--
    function goToAnchor(select) {
       var selectedAnchor = select.value;
       if (selectedAnchor!=0)
          return location.href = selectedAnchor;
    }
    //-->
    </script>
    The stuff within the BODY tag is
    Code:
     <form>
    <select name="anchorList" onchange="goToAnchor(this);">
    <option value="0" selected>This is a test...</option>
    <option value="link1">Link 1</option>
    <option value="link2">Link 2</option>
    <option value="link3">Link 3</option>
    </select>
    </form>
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  4. #4
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is all you need

    <select onchange="top.location.href=""this.options[this.selectedIndex].value;">

    You can put it into a function, if you like.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  5. #5
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, darn vB software messin up my quotes!
    Code:
    <script type="text/javascript">
    function goToAnchor(elem)
    {
    	if ( elem.selectedIndex != 0 )
    	{
    		top.location.href = elem.options[elem.selectedIndex].value;
    	}
    }
    </script>
     
    ...
     
    <form>
    	<select name="anchorList" onchange="goToAnchor(this);">
    		<option value="0" selected>This is a test...</option>
    		<option value="#link1">Link 1</option>
    		<option value="#link2">Link 2</option>
    		<option value="#link3">Link 3</option>
    	</select>
    </form>
    Quote Originally Posted by Sparkie
    I don't know a function from a fruitcake
    Function:
    Code:
    function goToAnchor(elem)
    {
    	if ( elem.selectedIndex != 0 )
    	{
    		top.location.href = elem.options[elem.selectedIndex].value;
    	}
    }
    Fruitcake:


    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





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
  •