SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    Non-Member
    Join Date
    Apr 2001
    Location
    Melbourne, Australia
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wink Opening Options from a dropdown

    There's got to be a better way of doing this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>
          Untitled
        </title>
      </head>
      <body>
        <script type="text/javascript">
    //<![CDATA[
    function ChangeDropdowns(value){
    if(value=="art"){
    document.getElementById('g2computers').style.display='none';
    document.getElementById('g2art').style.display='';
    document.getElementById('g2business').style.display='none';
    }
    if(value=="business"){
    document.getElementById('g2computers').style.display='none';
    document.getElementById('g2business').style.display='';
    document.getElementById('g2art').style.display='none';
    }
    if(value=="computers"){
    document.getElementById('g2computers').style.display='';
    document.getElementById('g2business').style.display='none';
    document.getElementById('g2art').style.display='none';
    }
    }
    //]]>
    </script><select id="abonnement" name="abonnement" onchange="ChangeDropdowns(this.value);" style="width: 200px;">
          <option value="">
            Select Categories
          </option>
          <option value="art">
            Art
          </option>
          <option value="business">
            Business
          </option>
          <option value="computers">
            Computers
          </option>
        </select><select id="g2art" name="g2art" style="display: none; width: 200px;">
          <option value="">
            www.website1.com
          </option>
          <option value="">
            www.website2.com
          </option>
          <option value="">
            www.website3.com
          </option>
        </select><select id="g2business" name="g2business" style="display: none; width: 200px;">
          <option value="">
            Select a Business Website
          </option>
          <option value="">
            www.website1.com
          </option>
          <option value="">
            www.website2.com
          </option>
          <option value="">
            www.website3.com
          </option>
        </select><select id="g2computers" name="g2computers" style="display: none; width: 200px;">
          <option value="">
            Select a Computer Website
          </option>
          <option value="">
            www.website1.com
          </option>
          <option value="">
            www.website2.com
          </option>
          <option value="">
            www.website3.com
          </option>
        </select>
      <input type="button" value="Confirm">
      <input type="text" id="chosensite" value="">
      </body>
    </html>
    What I would really like is one of those multi select panels to open (you know, like on eBay?), and then when you hit confirm, the value gets written to the id="chosensite".

    I know this is complicated and a big ask for help, but that's why I am posting it here. It has taken me all day just to make the above and to be honest, the more I try the tackier the whole think is looking lol.

    ..and look at the duplicate entries in the JS. There's got to be a better way. That code above smells really bad.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Yes, there really is a better way.

    The function that gets called from the onchange attribute, it would be a lot more useful to pass the this element as a whole, instead of just this.value
    That way the function can find out about which option is selected, and can also access the list of other options that are there.

    It may be tempting then to update the attribute to onchange="ChangeDropdowns(this);" which would work, but there is still the issue of having javascript embedded within the content itself. How do you feel about style attributes being scattered throughout your content?

    Do you shift all of the styling out to another file and use identifiers and class names instead? And what does this have to do with scripting?
    Well it's separating the content from the presentation. Javascript is the third item that's involved, the behaviour layer.
    Just as it is with the presentation, it's best to maintain the separation between the content and behaviour.

    So instead of using the onchange attribute we can attach a function name to an event of an element.

    Code javascript:
    document.getElementById('abonnement').onchange = ChangeDropdowns;

    When the ChangeDropdowns() function is called using traditional event registration, the this keyword automatically refers to element that the event was fired upon. So now the select element can looks like this:

    Code html4strict:
    <select id="abonnement" name="abonnement">

    I will completely forget that you ever has an inline style attribute on there.
    Place it in the stylesheet instead as follows

    Code css:
    #abonnement {
        width: 200px;
    }

    So back to the javascript. We have the ChangeDropdowns() function which needs to find out the currently selected element with this.selectedIndex and we can use the this.options array to access each one. Nice.

    Code javascript:
    function ChangeDropdowns() {
        var select = '';
        for (var i = 0; i < this.options.length; i++) {
            if (!this.options[i].value) {
                continue;
            }
            select = 'g2'+this.options[i].value;
            if (this.selectedIndex === i) {
                document.getElementById(select).style.display = '';
            } else {
                document.getElementById(select).style.display = 'none';
            }
        }
    }
    Last edited by paul_wilkins; Mar 19, 2008 at 00:50.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Finally with the confirm bit. That's going to wind up duplicating most of the ChangeDropdowns() function, so instead of doing that I will use just the one function for both tasks, and at the crucial moment use different functions to process things in different ways.

    First I'll break out some of the code into a separate function called toggleOnSelected()

    Code javascript:
    function toggleOnSelected(i, select) {
        if (this.selectedIndex === i) {
            document.getElementById(select).style.display = '';
        } else {
            document.getElementById(select).style.display = 'none';
        }
    }

    The ChangeDropdowns() function can now be disposed of and replaced with processDropdowns()

    Code javascript:
    function processDropdowns(fn) {
        var select = '';
        for (var i = 0; i < this.options.length; i++) {
            if (!this.options[i].value) {
                continue;
            }
            select = 'g2'+this.options[i].value;
            fn.call(this, i, select);
        }
    }

    The magic is fn.call(this, i, select) which keeps the this keyword referencing the right element.

    Now we hook them together with the following, placed at the end of the body (or run some other way after the page has loaded).

    Code javascript:
    var abonnement = document.getElementById('abonnement').
    abonnement.onchange = function () {
    	processDropdowns.call(this, toggleOnSelected);
    };

    Now the script does the same job as before, except that we can now create another function to update the site element.

    Code javascript:
    function updateSite(i, select) {
        if (this.selectedIndex === i) {
            document.getElementById('chosensite').value = document.getElementById(select).options[i].value;
        }
    }

    Earlier on I created the abonnement variable because I will want to use that reference again now. When I click the button, I'm more interested in the first select element, so I'm going to have the this keyword refer to that first select element, instead of the button that was clicked.

    Code javascript:
    document.getElementById('confirmButton').onclick = function () {
    	processDropdowns.call(abonnement, updateSite);
    };

    And our work here is done.

    Here is the full script. Either place it at the end of the body, or use some other way to ensure that the change and onclick events are assigned after the page has loaded.

    Code javascript:
    function processDropdowns(fn) {
        var select = '';
        for (var i = 0; i < this.options.length; i++) {
            if (!this.options[i].value) {
                continue;
            }
            select = 'g2'+this.options[i].value;
            fn.call(this, i, select);
        }
    }
    function toggleOnSelected(i, select) {
        if (this.selectedIndex === i) {
            document.getElementById(select).style.display = '';
        } else {
            document.getElementById(select).style.display = 'none';
        }
    }
    function updateSite(i, select) {
        if (this.selectedIndex === i) {
            document.getElementById('chosensite').value = document.getElementById(select).options[i].value;
        }
    }
     
    var abonnement = document.getElementById('abonnement').
    abonnement.onchange = function () {
    	processDropdowns.call(this, toggleOnSelected);
    };
    document.getElementById('confirmButton').onclick = function () {
    	processDropdowns.call(abonnement, updateSite);
    };
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    Non-Member
    Join Date
    Apr 2001
    Location
    Melbourne, Australia
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow -- I was implementing the code that you just showed and was rather impressed, and now you post all this. Way cool -- ok, much appreciated. I have it all open now and I am working on it. I'll check it all out. I'll come back and let you know how I go. Thank you so much!

    edit -- oh and you have some BB code errors

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Thanks, I resolved those bb code issues just after posting.

    I hope this code serves to highlight that scripting is quite an evolutionary process.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    Non-Member
    Join Date
    Apr 2001
    Location
    Melbourne, Australia
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's still one more BB prob, at the very top of your first response

    I am working on this for now. It is invaluable to me what you have provided. Thanks heaps.

    I will show you what I made when I am done

  7. #7
    Non-Member
    Join Date
    Apr 2001
    Location
    Melbourne, Australia
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am having a slignt bit of trouble.. bare with me

    Code:
    var abonnement = document.getElementById('abonnement').
    abonnement.onchange = function () {
        processDropdowns.call(this, toggleOnSelected);
    };
    by any chance, is this supposed to be:

    Code:
    var abonnement = document.getElementById('abonnement').
    document.onchange = function () {
        processDropdowns.call(this, toggleOnSelected);
    };
    ?

    edit

    Also, I am getting a message saying:

    Code:
    function processDropdowns(fn) {
        var select = '';
        for (var i = 0; i < this.options.length; i++) {
            if (!this.options[i].value) {
                continue;
            }
            select = 'g2'+this.options[i].value;
            fn.call(this, i, select);
        }
    }
    ..is null or not an object when i hit the confirm button.

    *I have no form action yet. Should that matter?

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    No, because with document.onchange that will be called when anything triggers the onchange event. It is only the element identified as abonnement that you're interested in attaching the event to, so leave it at that.

    The problem that you're facing is a common one. The section that attaches the events to the elements must occur after the element is available. Obviously. This means that it cannot be run from the head of the document.

    There are two ways around this. Many people keep the code on the head of the document and use the onload event to activate the code after the whole page has finished loading.

    Other people, like you and me place the script at the end of the body, where the page elements will be immediately available without having to wait until everything has finished loading. We are also following the sage advice from Yahoo about Best Practices for Speeding Up Your Web Site

    So you're welcome to place the functions wherever you like. Just make sure that the elements you want to attach events to, are available first before actually doing so.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by MrLeN View Post
    There's still one more BB prob, at the very top of your first response
    Ahh, I see that the top part of my first comment is missing. I shall recreate it now. It's been updated now.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    Non-Member
    Join Date
    Apr 2001
    Location
    Melbourne, Australia
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    pmw57, I'm sorry. I have implemented everything you've said and revised it a dozen times. I believe I understand what you've said, and I have done everything I can to try to follow what you've said, and as far as I can see I have everything just the way you said, but I just can't get it to work without an error. Here is my code in full. FYI: I am working on it locally, as a HTML file in HTML-Kit, and I have the JavaScript after the form as well. However, I've had both at the top, both at the bottom, one at the top and bottom and then the other way around, and I've tried onLoad() ..

    I know there's nothing worse than a lazy person who just wants to ask for everything, and I am not trying to be one. I am really trying to understand -- but I just can't seem to get it to work.


    Edit I bet it's a case of selective blindness or something. Like something REALLY stupid that I didn't do, and then I will face plant my keyboard..


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>
          Untitled
        </title>
    <style type="text/css">
    /*<![CDATA[*/
    <!--
    #abonnement {
        width: 200px;
    }
    -->
    /*]]>*/
    </style>
      </head>
      <body>
        <form>
          <select id="abonnement" name="abonnement" onchange=
          "document.getElementById('abonnement').onchange = ChangeDropdowns;">
            <option value="">
              Select Categories
            </option>
            <option value="art">
              Art
            </option>
            <option value="business">
              Business
            </option>
            <option value="computers">
              Computers
            </option>
          </select><select id="g2art" name="g2art" style="display: none;">
            <option value="">
              Select an Art Website
            </option>
            <option value="www.website1.com">
              www.website1.com
            </option>
            <option value=" www.website2.com">
              www.website2.com
            </option>
            <option value="www.website3.com">
              www.website3.com
            </option>
          </select><select id="g2business" name="g2business" style="display: none;">
            <option value="">
              Select a Business Website
            </option>
            <option value="www.website1.com">
              www.website1.com
            </option>
            <option value="www.website2.com">
              www.website2.com
            </option>
            <option value="www.website3.com">
              www.website3.com
            </option>
          </select><select id="g2computers" name="g2computers" style="display: none;">
            <option value="">
              Select a Computer Website
            </option>
            <option value="www.website1.com">
              www.website1.com
            </option>
            <option value="www.website2.com">
              www.website2.com
            </option>
            <option value="www.website3.com">
              www.website3.com
            </option>
          </select> <input type="button" value="Confirm" name="confirmbutton" id="confirmbutton" /> <input type="text"
          name="chosensite" id="chosensite" value="" />
        </form><script language="JavaScript" type="text/javascript">
    //<![CDATA[
    <!--
    function ChangeDropdowns() {
        var select = '';
        for (var i = 0; i < this.options.length; i++) {
            if (!this.options[i].value) {
                continue;
            }
            select = 'g2'+this.options[i].value;
            if (this.selectedIndex === i) {
                document.getElementById(select).style.display = '';
            } else {
                document.getElementById(select).style.display = 'none';
            }
        }
    }
    //-->
    //]]>
    </script><script language="JavaScript" type="text/javascript">
    //<![CDATA[
    <!--
    function processDropdowns(fn) {
        var select = '';
        for (var i = 0; i < this.options.length; i++) {
            if (!this.options[i].value) {
                continue;
            }
            select = 'g2'+this.options[i].value;
            fn.call(this, i, select);
        }
    }
    function toggleOnSelected(i, select) {
        if (this.selectedIndex === i) {
            document.getElementById(select).style.display = '';
        } else {
            document.getElementById(select).style.display = 'none';
        }
    }
    function updateSite(i, select) {
        if (this.selectedIndex === i) {
            document.getElementById('chosensite').value = document.getElementById(select).options[i].value;
        }
    }
     
    var abonnement = document.getElementById('abonnement').
    abonnement.onchange = function () {
        processDropdowns.call(this, toggleOnSelected);
    };
    document.getElementById('confirmButton').onclick = function () {
        processDropdowns.call(abonnement, updateSite);
    };
    //-->
    //]]>
    </script>
      </body>
    </html>

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    There are just two issues.

    Issue one is that a statement is supposed to end with a semicolin, not a fullstop. The second issue is that identifiers are case sensitive.

    The line changes are as follows

    [highlight="javascript"]
    // var abonnement = document.getElementById('abonnement').
    var abonnement = document.getElementById('abonnement');

    // document.getElementById('confirmButton').onclick = function () {
    document.getElementById('confirmbutton').onclick = function () {
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    Non-Member
    Join Date
    Apr 2001
    Location
    Melbourne, Australia
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    FANTASTIC! IT WORKS!

    See, all it was was "one" character.

    And it "was" a case of selective blindness lol. If I had've actually "seen" that I would have recognized that it was wrong. Guess I didn't look hard enough.

    Now I have only one more problem! When I very first select the dropdown menu, it does nothing. It only works on the second click.

    If you can tell me why it does that (because I don't know why, and can't figure it out).. I'm good to go.

    Also, I want to thank you very much for the help you have provided. I do appreciate it.

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I do notice that in the html content, the select element still has the inline onchage attribute on it. Does removing that make it work, so that the traditional event registration from javascript is the only one that's being used?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    Non-Member
    Join Date
    Apr 2001
    Location
    Melbourne, Australia
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    I do notice that in the html content, the select element still has the inline onchage attribute on it. Does removing that make it work, so that the traditional event registration from javascript is the only one that's being used?
    The reason I did that is because if I create a style (and I do prefer that), it gets funny with me. It wont display at all

    Code:
    #g2art, #g2business, #g2computers {
        display: none;
    }
    However, even so -- it still takes that extra click for the form to do anything.

    Edit: By the above, I mean that it still takes an extra click even when I remove all styles.

    I've tried playing around with it, but it's just easier to have it in the code.. which also allows me to remember to change it when I added new categories. I'll keep forgetting to go back to the stylesheet to add a new class.

    I was just playing around again, as I was typing this response to make sure I am not tripping. Adding it to a class doesn't help. Just makes matters worse.

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The last code you posted works for me in Firefox and IE 7.
    Can you narrow down the issue to a certain browser?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    Non-Member
    Join Date
    Apr 2001
    Location
    Melbourne, Australia
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am using Internet Explorer 7.0

    I will try in Firefox..

  17. #17
    Non-Member
    Join Date
    Apr 2001
    Location
    Melbourne, Australia
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope, it's doing the same thing in firefox 2.0

    This is my code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>
          Untitled
        </title>
    <style type="text/css">
    /*<![CDATA[*/
    <!--
    #abonnement {
        width: 200px;
    }
    #g2art, #g2business, #g2computers {
        display: none;
    }
    -->
    /*]]>*/
    </style>
      </head>
      <body>
        <script language="JavaScript" type="text/javascript">
    //<![CDATA[
    <!--
    function ChangeDropdowns() {
        var select = '';
        for (var i = 0; i < this.options.length; i++) {
            if (!this.options[i].value) {
                continue;
            }
            select = 'g2'+this.options[i].value;
            if (this.selectedIndex === i) {
                document.getElementById(select).style.display = '';
            } else {
                document.getElementById(select).style.display = 'none';
            }
        }
    }
    //-->
    //]]>
    </script>
        <form>
          <select id="abonnement" name="abonnement" onChange="document.getElementById('abonnement').onchange = ChangeDropdowns;">
            <option value="">
              Select Categories
            </option>
            <option value="art">
              Art
            </option>
            <option value="business">
              Business
            </option>
            <option value="computers">
              Computers
            </option>
          </select><select id="g2art" name="g2art">
            <option value="">
              Select an Art Website
            </option>
            <option value="www.website1.com">
              www.website1.com
            </option>
            <option value=" www.website2.com">
              www.website2.com
            </option>
            <option value="www.website3.com">
              www.website3.com
            </option>
          </select><select id="g2business" name="g2business">
            <option value="">
              Select a Business Website
            </option>
            <option value="www.website1.com">
              www.website1.com
            </option>
            <option value="www.website2.com">
              www.website2.com
            </option>
            <option value="www.website3.com">
              www.website3.com
            </option>
          </select><select id="g2computers" name="g2computers">
            <option value="">
              Select a Computer Website
            </option>
            <option value="www.website1.com">
              www.website1.com
            </option>
            <option value="www.website2.com">
              www.website2.com
            </option>
            <option value="www.website3.com">
              www.website3.com
            </option>
          </select> <input type="button" value="Confirm" name="confirmbutton" id="confirmbutton" /> 
       <input type="text" name="chosensite" id="chosensite" value="" />
        </form>
    <script language="JavaScript" type="text/javascript">
    <!--
    function processDropdowns(fn) {
        var select = '';
        for (var i = 0; i < this.options.length; i++) {
            if (!this.options[i].value) {
                continue;
            }
            select = 'g2'+this.options[i].value;
            fn.call(this, i, select);
        }
    }
    function toggleOnSelected(i, select) {
        if (this.selectedIndex === i) {
            document.getElementById(select).style.display = '';
        } else {
            document.getElementById(select).style.display = 'none';
        }
    }
    function updateSite(i, select) {
        if (this.selectedIndex === i) {
            document.getElementById('chosensite').value = document.getElementById(select).options[i].value;
        }
    }
     
    var abonnement = document.getElementById('abonnement');
    document.onchange = function () {
        processDropdowns.call(this, toggleOnSelected);
    };
    document.getElementById('confirmbutton').onclick = function () {
        processDropdowns.call(abonnement, updateSite);
    };
    //-->
    </script>
     
      </body>
    </html>

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The one thing that is causing problems is the styles.
    I know that you've placed them in there to hide the second-level select boxes.

    You have mentioned that you don't want to forget to update the stylesheet when changes occur there. That is the wrong way to do things. Instead, set things up so that the script hides them when things first begin.

    Remove the css and make one addition to the event registration part of the code.

    Code javascript:
    abonnement.onchange();

    There is also lots of duplication going on which should be removed. For example, the ChangeDropdowns function, the onload event and the onchange attribute on the select element itself.

    Then you're left with the following code which works as expected.

    Code html4strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>
          Untitled
        </title>
      </head>
      <body>
        <form>
          <select id="abonnement" name="abonnement">
            <option value="">
              Select Categories
            </option>
            <option value="art">
              Art
            </option>
            <option value="business">
              Business
            </option>
            <option value="computers">
              Computers
            </option>
          </select>
    	  <select id="g2art" name="g2art">
            <option value="">
              Select an Art Website
            </option>
            <option value="www.website1.com">
              [url]www.website1.com[/url]
            </option>
            <option value=" www.website2.com">
              [url]www.website2.com[/url]
            </option>
            <option value="www.website3.com">
              [url]www.website3.com[/url]
            </option>
          </select>
    	  <select id="g2business" name="g2business">
            <option value="">
              Select a Business Website
            </option>
            <option value="www.website1.com">
              [url]www.website1.com[/url]
            </option>
            <option value="www.website2.com">
              [url]www.website2.com[/url]
            </option>
            <option value="www.website3.com">
              [url]www.website3.com[/url]
            </option>
          </select>
    	  <select id="g2computers" name="g2computers">
            <option value="">
              Select a Computer Website
            </option>
            <option value="www.website1.com">
              [url]www.website1.com[/url]
            </option>
            <option value="www.website2.com">
              [url]www.website2.com[/url]
            </option>
            <option value="www.website3.com">
              [url]www.website3.com[/url]
            </option>
          </select>
    	  <input type="button" value="Confirm" name="confirmbutton" id="confirmbutton" /> 
          <input type="text" name="chosensite" id="chosensite" value="" />
        </form>
    <script language="JavaScript" type="text/javascript">
    <!--
    function processDropdowns(fn) {
        var select = '';
        for (var i = 0; i < this.options.length; i++) {
            if (!this.options[i].value) {
                continue;
            }
            select = 'g2'+this.options[i].value;
            fn.call(this, i, select);
        }
    }
    function toggleOnSelected(i, select) {
        if (this.selectedIndex === i) {
            document.getElementById(select).style.display = '';
        } else {
            document.getElementById(select).style.display = 'none';
        }
    }
    function updateSite(i, select) {
        if (this.selectedIndex === i) {
            document.getElementById('chosensite').value = document.getElementById(select).options[i].value;
        }
    }
     
    var abonnement = document.getElementById('abonnement');
    abonnement.onchange = function () {
        processDropdowns.call(this, toggleOnSelected);
    };
    abonnement.onchange();
    document.getElementById('confirmbutton').onclick = function () {
        processDropdowns.call(abonnement, updateSite);
    };
    //-->
    </script>
     
      </body>
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  19. #19
    Non-Member
    Join Date
    Apr 2001
    Location
    Melbourne, Australia
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That works absolutely perfectly -- and with no styles!

    I can't express to you how happy I am to have this code now

    When I am done implementing it into my page (which already has about 5 "gypsy" scripts in it) I'll show you the end result

    Yeah, I call my code Gypsy scripts, because I barely know what I am doing and my text boot is Google -- lol. Basically, I just type something that sounds like I want into Google and use the force from that point onwards.

    What I have so far is bits and pieces hacked out of examples from 1/2 a dozen forums.

    If you saw my actual code, you'd probably have to scream yourself to sleep every night to get any rest for months.

    That is why I am so grateful -- I really am. This code is a masterpiece and I couldn't have made it by myself in weeks - even if that's all I set myself to do.

    Thanks again mate. I am really happy and excited to get this into my page now

  20. #20
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Even though the code you've found may not be the best, at least it's getting things going for you and that's the important thing. Some of the other techniques just make future maintenance less of a burdon.

    Something that I'm really pleased with though is how this forum helps to track how code changes to meet different needs and requirements.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  21. #21
    Non-Member
    Join Date
    Apr 2001
    Location
    Melbourne, Australia
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Even though the code you've found may not be the best, at least it's getting things going for you and that's the important thing. Some of the other techniques just make future maintenance less of a burdon.

    Something that I'm really pleased with though is how this forum helps to track how code changes to meet different needs and requirements.
    Well, you can see the code in action here

    To see the code select "moderate referrer" under the second generation bold heading.

    Then you can select a category.

    See previously I didn't have categories. I launched this website 4 days ago, and traffic has doubled every day for 4 days. So that's why I realized that just 10 places are not good enough. I need to provide people with variety -- especially to help with relevancy, considering that this is a link site.

    I do have one problem that I have found already. I need to use that code 5 times in the page, except each generation section gas a different select ID. Therefore, I can't use "chosensite" for all of them.

    That's a bummer, but I'll try to work it out. See how much functionality you provided to me? This is amazing. Now the website is greatly improved.


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
  •