Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    getElementByID question

    I have a script that works, but there are certain areas that I am still trying to fix. This script is borderline for the DOM or general section, but I think this is the better place to put it.

    I have a form with a select box that I need to use to control the appearance of other select boxes. As with good programming, I am trying to make this general enough to reuse in various places on the page.

    Here is the script:
    Code:
     function changeDiv(opt_group, display){
            var the_div = getOptionSelected(opt_group);
            alert(the_div);
            var the_style = getStyleObject(the_div);
            if (the_style != false){
              the_style.display = display;
              }
            }
          
          function getOptionSelected(opt_group){
            if(document.getElementById && document.getElementById(opt_group)){
              alert(document.getElementById(opt_group).value);
              }
            else if (document.all && document.all(opt_group)){
              alert(document.ads.all(opt_group).value);
              }
            else {
              return false;
              }
            }
          
          function hideAll(){
            changeDiv("radio","none");
            changeDiv("print","none");
            changeDiv("tv","none");
            changeDiv("internet","none");
            changeDiv("other","none");
            } 
          
          function getStyleObject(objectId){
            if (document.getElementById && document.getElementById(objectId)){
              return document.getElementById(objectId).style;
              }
            else if (document.all && document.all(objectId)){
              return document.all(objectId).style;
              }
            else {
              return false;
              }
            }
          // -->
    I am only having trouble with the getOptionSelected() function--the others work as designed (which is to dynamically hide/display divs). Note that I am currently using the alert() for bug-testing, instead of returning the values. When I do this, about 12 alert boxes pop up (probably based on the number of named elements on the page?), and in IE one of them will have the actual value of the selected item in the select box. Firefox/Mozilla just has a bunch of alert boxes that say either "undefined" or "false".

    If necessary, I can post the related html, but for the sake of brevity, I will wait and see if that's important. I am not a big javascript programmer, but I am learning!

    Thanks in advance for any help.


  • #2
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    partial solution

    I made the following changes, and am much closer (it works, but is NOT reusable).

    Code:
    <script type="text/javascript">
          <!--
          function selectDiv(option, display){
            var the_div = getOptionSelected(option);
            changeDiv(the_div, display);
            }
            
          function changeDiv(the_div, display){
            var the_style = getStyleObject(the_div);
            if (the_style != false){
              the_style.display = display;
              }
            }
            
          function getOptionSelected(opt_group){
            if(document.ads.media && document.ads.media){
              return(document.ads.media.value);
              }
            else if (document.all && document.all(opt_group)){
              return(document.ads.all(opt_group).value);
              }
            else {
              return false;
              }
            }
            
          function hideAll(){
            changeDiv("radio","none");
            changeDiv("print","none");
            changeDiv("tv","none");
            changeDiv("internet","none");
            changeDiv("other","none");
            } 
            
          function getStyleObject(objectId){
            if (document.getElementById && document.getElementById(objectId)){
              return document.getElementById(objectId).style;
              }
            else if (document.all && document.all(objectId)){
              return document.all(objectId).style;
              }
            else {
              return false;
              }
            }
          // -->
    </script>
    Now, I need to be able to change which form (explicitly passing this is an option, but ugly at best), and the select box (also, passing this is an option, but its ugly too).

    Thanks again

  • #3
    fci
    fci is offline
    Senior Coder
    Join Date
    Aug 2004
    Location
    Twin Cities
    Posts
    1,345
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is something simple I wrote to observe the value of something
    Code:
    var limit = 10;
    var obs   = [];
    observe = function(str)
    {
        new_length = obs.unshift(str);
        obs.length = limit;
        document.getElementById('observe').innerHTML = obs.join(', ')
    };
    
    // you will need <div id="observe"></div> somewhere in the page.
    it's a simple way to observe the values of something.. change the value of limit to however many you want to be displayed at one time. you also have to read the output from right-to-left... maybe I should look into changing that..

    the form name can be changed this way:
    Code:
    var form_name = "my_form_name";
    varform = document.forms[form];
    anyway... I want to see it more in context.

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by darksarin
    Now, I need to be able to change which form (explicitly passing this is an option, but ugly at best), and the select box (also, passing this is an option, but its ugly too).
    You do not show how you are calling the function... But I am assuming by an onchange event handler on the select and using the keyword this to pass the object reference...

    <select onchange="getOptionSelected(this)"...

    Code:
          function getOptionSelected(opt_group){
            if(document.ads.media && document.ads.media){
              return(document.ads.media.value);
              }
            else if (document.all && document.all(opt_group)){
              return(document.ads.all(opt_group).value);
              }
            else {
              return false;
              }
            }
    If I understand the question, you wish to reference the form which this select is an element of without specifically passing or referencing the form name or place in the forms collection...

    If so: return(opt_group.form[opt_group].value);

    Should be the same as: return(document.ads.all(opt_group).value);

    And cross browser to boot... Currently your use of document.all makes the script IE compatable only....

    ......Willy


  •  

    Posting Permissions

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