www.webdeveloper.com
Results 1 to 5 of 5

Thread: Trying to get option menu to auto-select based on URL parameter

Hybrid View

  1. #1
    Join Date
    Mar 2009
    Posts
    2

    Question Trying to get option menu to auto-select based on URL parameter

    I want a page to have a different item pre-selected in an option menu-button according to the parameter at the end of the URL. Eg if the URL ends in "?choice=Beta", the item that says "Beta" should be pre-selected. Here's what I have so far:

    Code:
    <script type="text/javascript">
    function show(choice) { 
      var success = -1;
      for (var i=0; i < document.frmInput.cboNames.length; i++) {
        if (document.frmInput.cboNames.options[i].text == choice) 
          success = [i];
      }
      document.frmInput.cboNames.selectedIndex=success;
    } 
    
    var choice = location.href.split("?")[1].split("=")[1];
    document.write('<p>Choice: ' + choice + '</p>');
    show(choice);
    </script>
    
    <form name="frmInput">
      <p>Choice: 
      <select name="cboNames">
        <option value="1">Alpha</option>
        <option value="2">Beta</option>
        <option value="3">Gamma</option>
        <option value="4">Delta</option>
      </select>
      </p>
      <p><input type=button name="btnInput" value="Choose" onclick="var choice = location.href.split('?')[1].split('=')[1];show(choice);"></p>
    </form>
    I know the parameter (choice) is being picked up OK, because of the first paragraph - generated by "document.write()". And I know the code for selecting the right item ("show()") is OK because of the "Choose" button. But why doesn't "show(choice)" get triggered right after "document.write('<p>Choice: ' + choice + '</p>')"?

    I know I could put an "onload" into my body element, but it's not that easy to do that because this page is to be part of a CMS-driven site.

    Thanks.

  2. #2
    Join Date
    Mar 2009
    Posts
    13
    I'm assuming that the code that you posted is in the same order in your page in question. If so, I believe show(choice) in the script tag is failing because the form elements have not been created at this point.

    Try adding another inline script element after the form and move the show(choice) call to it and see what happens.

  3. #3
    Join Date
    Mar 2009
    Posts
    2

    Thumbs up Thanks

    Of course, that was it. Thanks very much.

  4. #4
    Join Date
    Aug 2009
    Posts
    1

    Great Post! (but help please)

    That code really helped me a lot. Now... I'm trying to implement it on two different drop-downs on the landing page, having for example these two options: example.html?choice=Beta and example.html?choice2=Green

    I dupplicated the inline script and placed it bellow the second dropdown editing the values so that "choice2" (and the second form imput) will be recognized. It works but somehow, when choosing "example.html?choice2=Green" the first dropdown gets lost trying to find an unexisting parameter and ends selecting nothing.

    Is there a way to keep the first dropdown with the default value selected (like: <option value="" selected="selected">--Choose one please--</option>) when a value of the second dropdown is summoned?

    I really have'nt much experience working on js and any suggestion will be highly appreciated!

    Thank!

  5. #5
    Join Date
    Jan 2010
    Posts
    6
    <Input name='Input'>
    Choice:
    <select name='Input'>
    <option value= 1 >1</option>
    <option value=2>2</option>
    <option value=3>3</option>
    <option value=4>4</option>
    </select>
    <input type=button name='Max' value='Max' onclick='Max' show(choice);">
    </Input>

    Hi I'm pretty fresh with making user scripts so any help would be apprechiated.

    The Option value may varry from 1 to 50. I can select the Max button but I want to make a choice. Any Ideas anyone

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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



Recent Articles