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 14 of 14
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Posts
    436
    Thanks
    1
    Thanked 0 Times in 0 Posts

    redirect on select

    I have a <select> tag and I want each <option> to redirect to another page once it selected.

    The process is dynamic - for example:
    <option value="3">sssdfasgt</option> will redirect to http://www.URL.com/page.asp?value=3 upon selection.

    What I don't want to hapen is to redirect a selected option (<option selected>) - only the not selected will redirect.
    How can it be done?
    Thanks alot.

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    Iran
    Posts
    695
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this :


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>Untitled</title>
    <script>
    function reDir(oInput)
    {
    switch (oInput)
    {
    case 1 :
    window.location = "2.html";
    break;
    case 2 :
    window.location = "3.html";
    break;
    case 3 :
    window.location = "4.html";
    break;
    }
    }
    </script>
    </head>

    <body>

    <select name="hello" onchange="reDir(this.selectedIndex)">
    <option selected> 1
    <option> 2
    <option> 3
    <option> 4
    </select>


    </body>
    </html>






    Notice : Each option has an index, the indexes begin from 0, means the index number of <option> 4 is 3. If you don't wana redirect to a page when a by default selected option is chosen, do not put a case for that in the switch.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    New York, USA
    Posts
    175
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Another way...
    I would probably write something like this:

    <script language="javascript">
    function linkTo(optVal){
    if(optVal=="") return false;
    window.location='http://www.URL.com/page.asp?value='+optVal;
    }
    </script>
    <select name="select" onchange="linkTo(this.options[this.selectedIndex].value);">
    <option value="" selected>select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    If this is a select-multiple you'll need more...
    Code:
    <html>
    <head>
    <title>untitled</title>
    </head>
    <body>
    <form>
    <select 
    onchange="if(!options[selectedIndex].defaultSelected)
    location='http://www.URL.com/page.asp?value='+options[selectedIndex].value">
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="4" selected="selected">option 4</option>
    <option value="5">option 5</option>
    </select>
    </form>
    </body>
    </html>

  • #5
    Regular Coder
    Join Date
    Jul 2002
    Posts
    436
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks to you all!
    great help for me...

  • #6
    Regular Coder
    Join Date
    Jul 2002
    Posts
    436
    Thanks
    1
    Thanked 0 Times in 0 Posts
    This onChange thing is a bit problematic.
    When the page loads, the selected option in the select tag will not redirect if I reselect it.
    For example:
    my select has three options:
    Code:
    <select onchange="blabla">
    <option value="1" selected>1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
    When I select option2, it'll perform the 'blabla' onchange - same for option3.
    But when I select option1 (which is already selected) it does nothing!
    I thought about something like 'onselect' for each option - but it didn't work.
    Any suggestions?

    Thanks.

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    A change event, which is what the Select.onchange handler 'traps', will only be fired when, heh, you change the drop-down. Re-selecting the same option isn't considered a change. Normally this is avoided by setting the <option selected="selected"...> attribute on a 'dummy' option (usually the first) to force a change. Would this be a problem?

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    New York, USA
    Posts
    175
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah the dummy option solves that real good. Usually I name it "select" or "click to navigate"

    Another thing you can do is provide a 'go' button next to the select that calls the same function. People can use that if there was no onchange fired. it's good if there might be times where an option that needs to be available might already be selected. It serves as a backup. It's very common (and intuitive to the user) to use a combination of both onchange and 'go' button if your design allows it.

  • #9
    Regular Coder
    Join Date
    Jul 2002
    Posts
    436
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I'd rather not putting an ugly "go" button...
    and the dummy option will ruin it too... (I have to have specific *real* option selected)

    Is there any other way to solve this?
    Is JS+HTML so poor?!? I can't believe it...
    - any other suggestions?
    (thanks alot for helping)

  • #10
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Ummm...I thought the whole idea here was to not redirect if the selected option was chosen.

  • #11
    Regular Coder
    Join Date
    Jul 2002
    Posts
    436
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I had to change it.
    Is there any other way? maybe something specific for each <option> - onclick,onselect?
    something?!?
    Thanks

  • #12
    Regular Coder
    Join Date
    Jul 2002
    Location
    Iran
    Posts
    695
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I dunno how to make this, but even if you make it, the whole idea is nonesense to me! Coz you have to assign the address of your current page to the first option, that makes that rational, because each option redirects you to a page, so, if you don't use a dummy option, then it means that the first option actually has redirected you to a page, that would be the current page, unless you're trying to show that it's gonna refresh the page. Also a dummy option isn't ugly at all! But it's good if somebody finds the answer, coz theoretically it's possible ( As we can see in this case! )

  • #13
    Regular Coder
    Join Date
    Jul 2002
    Posts
    436
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Your'e wrong my friend!
    It's an administration page I made for a client which always redirects to the same page with different parameters attached (e.g: ?parameterA=12&parameterB=8).
    It's important that the options will remain in the same order(!) and I need it to redirect for each and every <option>.
    I'm sure there's a way - I hope someone know something...

  • #14
    Owl
    Owl is offline
    New Coder
    Join Date
    Jun 2002
    Posts
    62
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hi ShMiL,

    I understand this:
    Originally posted by ShMiL
    I need it to redirect for each and every <option>.
    Code:
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    click1=0
    function redirect(x) {
       if (!click1) { click1=1; return }
       if ((x.selectedIndex+1) == location.href.split('=').reverse()[0]) { click1=0; return } 
       form1.submit()
    }
    </SCRIPT>
    </HEAD>
    
    <BODY>
    <FORM name="form1">
    <select  name="value" onclick="redirect(this)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
    </FORM>
    </BODY>
    </HTML>
    But I do not understand this:
    Originally posted by ShMiL
    It's important that the options will remain in the same order(!)
    ( •) (• )
    >>V


  •  

    Posting Permissions

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