SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    go to a new page on select dropdown value

    I have a little drop down in my nav that I wont to be able to let the user navigate to new pages.

    The code looks like this but its not reading the values, only refreshing the actual page its on.

    Code:
    <script language="javascript">     
    function myChangeHandler() {         
    window.open(this.options[this.selectedIndex].value, '_parent');         
    this.form.submit(); } 
    </script>
    Code:
    <form id="formElement" method="get" action="#">     
    <select onchange="myChangeHandler.apply(this)">         
    <option></option>         
    <option value="/tEstablishment.php">View Site 1</option>         
    <option value="/currency.php">View Site 2</option>         
    <option value="/country.php">View Site 3</option>     
    </select> 
    </form>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by multichild View Post
    The code looks like this but its not reading the values, only refreshing the actual page its on.
    You script works as soon as you stop using inline HTML event attributes to assign the event. Those inline event attributes fail to pass the context (accessed with the this keyword).
    See early event handlers for more details on the problems with inline event handlers.

    To fix this, and assuming that your script is at the bottom of the page where it belongs, just before the </body> tag - you can replace the inline event attribute with one that's done via scripting instead, results in a working solution.

    This is easily achieved by giving the select element a name, so that you can easily access it from the script, and then assigning the event to the select element.

    HTML Code:
    <select name="viewsite">
        ...
    </select>
    Code javascript:
    function myChangeHandler() {         
        window.open(this.options[this.selectedIndex].value, '_parent');         
        this.form.submit();
    } 
     
    var form = document.getElementById('formElement');
    form.elements.viewsite.onchange = myChangeHandler;

    Oh and by the way, using language="javascript" is incredibly obsolete. You should be using type="text/javascript" as the scripting attribute there instead, or in modern web browsers using no attribute at all.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •