www.webdeveloper.com
Results 1 to 12 of 12

Thread: jump to a web page using select/option

  1. #1
    Join Date
    Mar 2015
    Posts
    29

    jump to a web page using select/option

    It's been almost 20 years since I did anything like this, and frankly, I don't remember how I did it. The code for it has been lost to time, so I don't even have that to refer to. I have tried searching for clues, but I am either not being specific enough in my search queries, or I just don't know how to search for it anymore. The issue is as follows:

    I have a series of 50 small web pages that the user can scroll through using previous and next links. I want to add a goto link between those two links so the user can jump to the page they want to see next. All pages are local, so no explicit web paths are required, only the name of the file and any local path of directories needed to find the file.

    What I do remember about it is that I used a select/option list to contain the labels of the pages, as well as the file names of the web pages each label points to. I also seem to remember it using some javascript to make it function. What I don't remember is how to write it, or whether or not it used a submit button.

    Also, I am thinking it would be nice to use a text box to enter the number of the page (1-50) and have the code determine which page it is and jump there automatically, rather than selecting an item from a drop-list and possibly having to click a submit button.

    Anyone willing to help me on this? I know how to setup the form. What I need help with is the javascript, or if things have changed that much in 20 years, what to use now instead.

    Thanks in advance.
    Wayne

  2. #2
    Join Date
    Mar 2015
    Posts
    29
    I have the form code written for all of the pages. Below is a small sample of what the code is. I did not include all of the option items because there are 71 in all. I made this so it will display in a browser if anyone wants to see what it looks like.

    I do not remember what action to use in the form, but I seem to recall using onSelect. I just don't remember what the javascript code is that makes selection jump to the selected page. Any help is appreciated.

    Code:
        <TABLE style="margin-right: 5px; margin-top: 22px; float: left; border: 1px solid; border-spacing: 0; padding: 2.75px; width: 17%; background: LightBlue;">
          <TR><TH style="text-align: left; font-size: 11pt;"><A href="O50b.htm" title="Original 50b">Previous</A></TH>
          <TH style="text-align: center; font-size: 11pt; white-space: nowrap;"><FORM>Go:
          <SELECT name="goto" size=1 style="font-size: 10pt;">
          <OPTION name="01" value="O01.htm" disabled>01</OPTION>
          <OPTION name="02" value="O02.htm" selected>02</OPTION>
          <OPTION name="50b" value="O50b.htm">50b</OPTION>
          </SELECT></FORM>
          </TH>
          <TH style="text-align: right; font-size: 11pt;"><A href="O02.htm" title="Original 02">Next</A></TH></TR>
        </TABLE>

  3. #3
    Join Date
    Mar 2015
    Posts
    29
    OK that didn't work. I can't edit the post, so here's the code again.

    Code:
        <TABLE style="margin-right: 5px; margin-top: 22px; float: left; border: 1px solid; border-spacing: 0; padding: 2.75px; width: 17%; background: LightBlue;">
          <TR><TH style="text-align: left; font-size: 11pt;"><A href="O50b.htm" title="Original 50b">Previous</A></TH>
          <TH style="text-align: center; font-size: 11pt; white-space: nowrap;"><FORM>Go:
          <SELECT name="goto" size=1 style="font-size: 10pt;">
          <OPTION name="01" value="O01.htm" disabled>01</OPTION>
          <OPTION name="02" value="O02.htm" selected>02</OPTION>
          <OPTION name="50b" value="O50b.htm">50b</OPTION>
          </SELECT></FORM>
          </TH>
          <TH style="text-align: right; font-size: 11pt;"><A href="O02.htm" title="Original 02">Next</A></TH></TR>
        </TABLE>

  4. #4
    Join Date
    Dec 2012
    Posts
    1,626
    reply doesn't work currently.
    Last edited by Sempervivum; 08-10-2016 at 04:44 PM.

  5. #5
    Join Date
    Mar 2015
    Posts
    29
    Well, I looked at the settings here and apparently post editing is not available to me. As I have seen other posts edited I can only assume that it is possible to have the permission, but I don't have it and don't know how to get it. In lieu of that I will just continue posting new entries as I learn more or run into other issues.

    I did some reading and found that onSelect is not an available attribute for SELECT or OPTION tags, so I guess that wasn't what I did before. I have been wracking my brain to try and remember how I did it before, but 20 years is a long time. I am continuing to search for something like what I want to do, but have yet to find anything. I'm still holding out hope for help to come my way.

  6. #6
    Join Date
    Oct 2013
    Location
    Sheboygan, Wisconsin
    Posts
    1,632
    Usually with in 10 minutes of posting, you can edit or post count dictates.

  7. #7
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,942

    Lightbulb

    Not sure if this is what you are going for, but take a look.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> HTML5 page </title>
    
    <style type="text/css">
     #tbl { 
        margin-right: 5px;
        margin-top: 22px;
        border: 1px solid;
        border-spacing: 0;
        padding: 2.75px;
        width: 50%;
        background: LightBlue;
        font-size: 1.1em;
    }
     select { font-size: 1em; }
    </style>
    
    </head>
    <body>
    
    <TABLE id="tbl">
     <TR>
      <TH>
       <A onclick="gotoSite('Back1')">Previous</A>
      </TH>
      <TH>
       <A onclick="gotoSite('Here')">Go: </A>
        <SELECT id="gotoIndex" onchange="gotoSite(selectedIndex)">
         <OPTION value="O01.htm">001</OPTION>
         <OPTION value="O02.htm">002</OPTION>
         <OPTION value="O03.htm">003</OPTION>
         <OPTION value="O04.htm">004</OPTION>
         <OPTION value="O05.htm">005</OPTION>
         <OPTION value="O50b.htm">050b</OPTION>
        </SELECT>
      </TH>
      <TH>
       <A onclick="gotoSite('Next1')">Next</A>
      </TH>
     </TR>
    </TABLE>
    
    <script type="text/javascript">
    // For: http://www.webdeveloper.com/forum/showthread.php?358057-jump-to-a-web-page-using-select-option
    
    function gotoSite(info) {
      var d = document.getElementById('gotoIndex');
      var indx = info;
      switch (info) {
        case 'Back1': indx = d.selectedIndex-1;
                      if (indx < 0) { indx = d.options.length-1; } break;
        case 'Next1': indx = d.selectedIndex+1;
                      if (indx >= d.options.length) { indx = 0; } break;
        case 'Here' : indx = d.selectedIndex; break;
             default: indx = info; break;
      }
      var href = d.options[indx].value;
    
      alert(href);
    // substitute following for "alert()" above after testing
    //  document.location.href = href;
    
    }
    </script>
    
    </body>
    </html>
    Replace the testing alert with the line specified after adding other link pages.

  8. #8
    Join Date
    Mar 2015
    Posts
    29
    Quote Originally Posted by Train View Post
    Usually with in 10 minutes of posting, you can edit or post count dictates.
    <br>
    <br>I have checked and at the bottom of the page, where the Posting Permissions are, it says I may not edit my posts. Is there any particular reason why some users can edit their posts and others can't?

  9. #9
    Join Date
    Mar 2015
    Posts
    29

    Smile

    Quote Originally Posted by JMRKER View Post
    Not sure if this is what you are going for, but take a look.

    <snip>

    Replace the testing alert with the line specified after adding other link pages.
    Thanks, JMRKR. That is some nice code. I found a simple single-line solution though:

    Code:
    <SELECT size=1 style="font-size: 10pt;" onchange="location=this.options[this.selectedIndex].value;">
    It works great for what I am doing, but there is one caveat with this. In Internet Explorer 9 (I can't say about newer versions) if you have a blank entry:

    Code:
    <OPTION value="" selected>&nbsp;</OPTION>
    IE will open a dialog to select a local file from when you select it from the drop menu. I do not know if this happens with pages that are on a remote site or not, as my pages are still offline, but loading the page locally on my computer has this result. Firefox and Google Chrome do not exhibit this behavior.

    Are you aware of this, and if so do you know what (if anything) I can do to make sure it doesn't do this? Meanwhile, I will play with the code snippet you provided to see what I can do with it.

    Thanks!

  10. #10
    Join Date
    Mar 2015
    Posts
    29
    I changed to the advanced editor to see if it made any difference to editing posts, but all it did was make every reply using the quick reply have html code put in place of line breaks and <,& and > with character encodings. I switched back to the standard editor.

  11. #11
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,942

    Lightbulb

    In your original post you did not have or mention the need for a blank entry in the select list.
    Regardless, this should take care of that problem if you really need the blank entry listed.

    Code:
    function gotoSite(info) {
      var d = document.getElementById('gotoIndex');
      var indx = info;
      switch (info) {
        case 'Back1': indx = d.selectedIndex-1;
                      if (indx < 0) { indx = d.options.length-1; } break;
        case 'Next1': indx = d.selectedIndex+1;
                      if (indx >= d.options.length) { indx = 0; } break;
        case 'Here' : indx = d.selectedIndex; break;
        case '': indx = -1; break;
             default: indx = info; break;
      }
      if (indx == -1) return;  // exit function before any href changes made
      var href = d.options[indx].value;
    
      alert(href);
    // substitute following for "alert()" above after testing
    //  document.location.href = href;
    
    }
    selectedIndex is NOT normally a negative number,
    so by setting it to minus one you can check for that and do nothing.

  12. #12
    Join Date
    Mar 2015
    Posts
    29
    Quote Originally Posted by JMRKER View Post
    In your original post you did not have or mention the need for a blank entry in the select list.
    Regardless, this should take care of that problem if you really need the blank entry listed.

    <snip>

    selectedIndex is NOT normally a negative number,
    so by setting it to minus one you can check for that and do nothing.
    Thanks for the quick reply.

    When I made the original post I did not have a blank option. The reason I decided to use a null option is because of the code I found that did work. However, it soon proved to have a small catch.

    In my options, the option for the current page is set disabled (with the disabled attribute) so you aren't bothered with selecting the same page over again. I set each pages options so that the next page in the sequence was selected (using the selected attribute). This worked as far as that option being the one that displayed in the selection box. However, if you wanted to select that page you could, but it would not go to that page. The code snippet would not accept the currently selected option.

    This held true in Firefox, Chrome and IE. I thought, since the currently selected option isn't able to be followed, I would remove the selected attributes. I did, and now every page except the first showed the first page in the selection box. The first page showed the second page. It was still not able to be followed when selected from the drop list. I decided that since the currently selected item could not be followed that I would add a null item. That worked and all was good until I tried selecting it in IE.

    In IE selecting the null item causes a file dialog to open that will allow you to select a file to load. I did not expect this behavior, but I figured that no one would select the blank option anyway so left it alone. I just thought I would ask and see if you knew anything about this behavior, and what I could do to stop it if it is possible.

    I am studying the code snippets you have provided, and will likely add them into my code to avoid the issue of the file dialog. Note that this issue only happens when I am loading the pages on my computer, and not on the internet. I have not put these pages online yet, so I don't know if the same behavior would happen that way.

    Thanks again for the quick response.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.24194 seconds
  • Memory Usage 2,984KB
  • Queries Executed 15 (?)
More Information
Template Usage (34):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (6)bbcode_code
  • (3)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (12)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (12)postbit
  • (12)postbit_onlinestatus
  • (12)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates