SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript Drop Down List

    Just a quick question for you smart guys and gals. I consider myself a front end designer and developer...I usually stay away from back end coding as my job is to make things look pretty! I have created a javascript drop down...where each selection in the drop down will go to a particular PDF file. However, I cannot seem to get it to pop up in its own page when selected. I've tried the common target="blank" but nothing has helped. Any suggestion how I can enter the correct code so that it will work?

    Here is how it looks currently:


    /*

    This is the Header file. Remember to remove all "
    from the html code and all line returns. The code
    needs to be listed on one line.

    */

    document.writeln('<option value=#>-- Please Select One --</option>');
    document.writeln('<option value=http://sport/PDF/board_082304.pdf>August 23, 2004</option>');
    document.writeln('<option value=http://sport/PDF/board_072104.pdf>July 21, 2004</option>');
    document.writeln('<option value=http://sport/PDF/board_071204.pdf>July 12, 2004</option>');
    document.writeln('<option value=http://sport/PDF/board_070504.pdf>July 5, 2004</option>');
    document.writeln('<option value=http://sport/PDF/board_062804.pdf>June 28, 2004</option>');
    document.writeln('<option value=http://sport/PDF/board_052104.pdf>May 21, 2004</option>');
    document.writeln('<option value=http://sport/PDF/board_051404.pdf>May 14, 2004</option>');
    document.writeln('<option value=http://sport/PDF/board_050704.pdf>May 7, 2004</option>');
    document.writeln('<option value=http://sport/PDF/board_043004.pdf>April 30, 2004</option>');
    document.writeln('<option value=http://sport/PDF/board_040504.pdf>April 5, 2004</option>');

  2. #2
    Tranceoholic lilleman's Avatar
    Join Date
    Feb 2004
    Location
    Írebro, Sweden
    Posts
    2,716
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Try using this code to print out the opening tag.
    Code:
    document.writeln('<select name="foo" onchange="window.open(this.options[this.selectedIndex].value, \'\')">');
    Yours, Erik.

  3. #3
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do I put this above the other code, or in each one? Sorry, I'm slow

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2004
    Location
    Milano
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is not the part that calls the window opening. It's hard to debug this way.
    Why do you use the document.writeln() instead of directly putting the options in the HTML flow?

  5. #5
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    </head>
    <body>
    <form target="_blank">
    <select onchange="v=options[selectedIndex].value;if(this.form.action=v)this.form.submit()">
    <option value="">-- Please Select One --</option>
    <option value=""></option>
    <option value="http://sport/PDF/board_082304.pdf">August 23, 2004</option>
    <option value="http://sport/PDF/board_072104.pdf">July 21, 2004</option>
    <option value="http://sport/PDF/board_071204.pdf">July 12, 2004</option>
    <option value="http://sport/PDF/board_070504.pdf">July 5, 2004</option>
    <option value="http://sport/PDF/board_062804.pdf">June 28, 2004</option>
    <option value="http://sport/PDF/board_052104.pdf">May 21, 2004</option>
    <option value="http://sport/PDF/board_051404.pdf">May 14, 2004</option>
    <option value="http://sport/PDF/board_050704.pdf">May 7, 2004</option>
    <option value="http://sport/PDF/board_043004.pdf">April 30, 2004</option>
    <option value="http://sport/PDF/board_040504.pdf">April 5, 2004</option>
    </select>
    </form>
    </body>
    </html>
    ::: certified wild guess :::

  6. #6
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    even shorter:

    Code:
    <select onchange="(form.action = options[selectedIndex].value) && form.submit()">
    but it's really ugly.

    window.open solution is better.

  7. #7
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You call that short?
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <script type="text/javascript">
    
    function x(s)
    {
    	var f = 'resizable,scrollbars,menubar';
    	var w = 680;
    	var h = 420;
    	var l = (screen.availWidth - w) * .5;
    	var t = (screen.availHeight - h) * .3;
    	f += ',left='+l+',top='+t+',width='+w+',height='+h;
    	foo = open('about&#58;blank','foo',f);
    	foo.focus();
    	s.form.submit();
    }
    
    </script>
    </head>
    <body>
    <form target="foo">
    <select onchange="(action=value)&&x(this)">
    <option value="">-- Please Select One --</option>
    <option value=""></option>
    <option value="http://sport/PDF/board_082304.pdf">August 23, 2004</option>
    <option value="http://sport/PDF/board_072104.pdf">July 21, 2004</option>
    <option value="http://sport/PDF/board_071204.pdf">July 12, 2004</option>
    <option value="http://sport/PDF/board_070504.pdf">July 5, 2004</option>
    <option value="http://sport/PDF/board_062804.pdf">June 28, 2004</option>
    <option value="http://sport/PDF/board_052104.pdf">May 21, 2004</option>
    <option value="http://sport/PDF/board_051404.pdf">May 14, 2004</option>
    <option value="http://sport/PDF/board_050704.pdf">May 7, 2004</option>
    <option value="http://sport/PDF/board_043004.pdf">April 30, 2004</option>
    <option value="http://sport/PDF/board_040504.pdf">April 5, 2004</option>
    </select>
    </form>
    </body>
    </html>
    ::: certified wild guess :::

  8. #8
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you do window.open anyway, you don't need action thing anymore. Just onchange = window.open(this.value etc)

    And, yes, you have to qualify. Always.

  9. #9
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the heads up but there's nothing wrong with doing it that way, so long as doctype isn't an issue. As far as 'qualifying' - I assume you meant fully-qualified paths - all current browsers support the abbreviated versions, due to 'upside-down' form element scope chains (handler-Element-Form-Document.Window). The only one I don't use in practice is .value for Select, as you will lose some browsers there.
    ::: certified wild guess :::


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
  •