Solved

Javascript error

Posted on 2006-11-13
9
254 Views
Last Modified: 2008-02-01
Hi Experts

I have an error that i'm stuck with; here is the code

<script language="JavaScript">
var DomYes=document.getElementById?1:0;

function set_child_listbox(parentObject,childObject,childArray,spanToHide) {

        //Clear child listbox
        for(var i=childObject.length;i>0;i--) {
                childObject.options[i] = null;
        }
       
        childObject.options[0] = new Option("Select Value","");
        var sel_index = parentObject.options[parentObject.selectedIndex].value;
        if (sel_index == "") {
                childObject.disabled = true;
        } else {
                childObject.disabled = false;
                var childIndex = 1;
                for (i = 0; i < childArray.length; i++) {
                        if (childArray[i][1] == sel_index) {
                                childObject.options[childIndex] = new Option(childArray[i][2], childArray[i][0]);
                                childIndex++;
                        }
                }
        }
        //Select first option
        childObject.selectedIndex = 0;

        //Hide dependent grid
        if (spanToHide != "") {
                if (DomYes) {
                        document.getElementById(spanToHide).style.display="none";
                } else {
                        document.all[spanToHide].style.display="none";
                }
        }
}

function reload_page() {
  var sel_index = document.store_productsSearch.s_category_id.options[document.store_productsSearch.s_category_id.selectedIndex].value;
  var sel_subindex = document.store_productsSearch.s_product_id.options[document.store_productsSearch.s_product_id.selectedIndex].value;
  if (sel_subindex != "") {
         document.location.href = document.location.pathname + "?" + "s_product_id=" + sel_subindex+"&s_category_id=" + sel_index;
  }
}

function disable_child_listbox(spanToHide) {
 
  //Disable second listbox
  if (document.store_productsSearch.s_category_id.selectedIndex == "") {
     document.store_productsSearch.s_product_id.disabled = true;
  }    

  //Hide dependent grid
  if (document.store_productsSearch.s_product_id.selectedIndex == "") {
        if (spanToHide != "") {
                if (DomYes) {
                        document.getElementById(spanToHide).style.display="none";
                } else {
                        document.all[spanToHide].style.display="none";
                }
        }
  }    
}

window.onload = function() {
        disable_child_listbox("Products");
}



var Product = new Array(
 
new Array(12,7,"Canvas prints"),
new Array(11,7,"Foam mounted pictures"),
new Array(10,7,"Lasting posters"),
new Array(13,7,"Photographic resizing")
);

</script>

The code is related to 2 list boxes; the first has an option (the 2nd is disabled by default AND isn't 1st error) when the first is selected the 2nd is enabled and the relivant options are populated via the above array

<select onchange="set_child_listbox(this, document.store_productsSearch.s_product_id,Product,'Products');" name="s_category_id">
                        <option value="" selected>Select Value</option>
                        <OPTION VALUE="5">Flyers</OPTION>
<OPTION VALUE="1">Photos</OPTION>
<OPTION VALUE="7">PRECIOUS MEMORIES</OPTION>
<OPTION VALUE="6">Signage Display products</OPTION>
<OPTION VALUE="2">Subscriptions</OPTION>

                      </select>
 </td>
                  </tr>
 
                  <tr class="Controls">
                    <th>Sub category</th>
 
                    <td>
                      <select name="s_product_id">
                        <option value="" selected>Select Value</option>
                       
                      </select>

so there is 2 errors:
1st error is:- The 2nd listbox should be disabled untill an option is shown
2nd error is this line >>>>document.getElementById(spanToHide).style.display="none"; (says object required)

Thanks for reading
0
Comment
Question by:1desman1
  • 3
  • 2
  • 2
  • +1
9 Comments
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17934580
1desman1,

1.  Add disabled to the select tag.  Something like this ...

<select name="s_product_id" disabled>

2.  The function getElementById() needs to have the id treated as a string.  For example ...

document.getElementById("spanToHide")

Let me know if you have any questions or need more information.

b0lsc0tt
0
 

Author Comment

by:1desman1
ID: 17934790
@ b0lscott

Still the error with

2.  The function getElementById() needs to have the id treated as a string.  For example ...

document.getElementById("spanToHide")
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17934875
I looked at the code a little too quick.  spanToHide is a variable isn't it, not the value of the id?  If it is a variable then remove the quote marks.  What does the element look like that has the id of Products?  Please provide that block of code too.  Search the document and make sure you find id="Products" only once.

bol
0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 17

Expert Comment

by:gops1
ID: 17935272
Why can't you call the function onload of body instead of window.onload
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 17940271
What HTML element has:  id='Products' ?
0
 
LVL 17

Expert Comment

by:gops1
ID: 17940443
If you still like to use window.onload, then move your window.onload at the end of your html file:
Example:
<html>
     <head></head>
<body>
--
--
</body>
</html>

<script>
window.onload = function() {
        disable_child_listbox("Products");
}
</script>
0
 

Author Comment

by:1desman1
ID: 17941817
@ goops1

That now disables the 2nd list box but still the "Object Required" error on this line >>> document.getElementById(spanToHide).style.display="none";

You mentioned earlier to place this in the body; not knowing javascript very well, how do I do that

Thanks
0
 
LVL 17

Accepted Solution

by:
gops1 earned 500 total points
ID: 17954933
Here I have created an HTML picking up your code. But there are some minor changes. Have a look:

<html>
      <title>Script Demo</title>
      <head>
            <script language="JavaScript">
                  var DomYes=document.getElementById?1:0;

                  function set_child_listbox(parentObject,childObject,childArray,spanToHide) {
                        //Clear child listbox
                        for(var i=childObject.length;i>0;i--) {
                              childObject.options[i] = null;
                        }

                        childObject.options[0] = new Option("Select Value","");
                        var sel_index = parentObject.options[parentObject.selectedIndex].value;
                        if (sel_index == "") {
                              childObject.disabled = true;
                        } else {
                              childObject.disabled = false;
                              var childIndex = 1;
                              for (i = 0; i < childArray.length; i++) {
                                    if (childArray[i][1] == sel_index) {
                                          childObject.options[childIndex] = new Option(childArray[i][2], childArray[i][0]);
                                          childIndex++;
                                    }
                              }
                        }
                        //Select first option
                        childObject.selectedIndex = 0;

                        //Hide dependent grid
                        if (spanToHide != "") {
                              if (DomYes) {
                                    document.getElementById(spanToHide).style.display="none";
                              } else {
                                    document.all[spanToHide].style.display="none";
                              }
                        }
                  }

                  function reload_page() {
                        var sel_index = document.store_productsSearch.s_category_id.options[document.store_productsSearch.s_category_id.selectedIndex].value;
                        var sel_subindex = document.store_productsSearch.s_product_id.options[document.store_productsSearch.s_product_id.selectedIndex].value;
                        if (sel_subindex != "") {
                              document.location.href = document.location.pathname + "?" + "s_product_id=" + sel_subindex+"&s_category_id=" + sel_index;
                        }
                  }

                  function disable_child_listbox(spanToHide) {
                        spanToHide="Products"
                        //Disable second listbox
                        if (document.store_productsSearch.s_category_id.selectedIndex == "") {
                              document.store_productsSearch.s_product_id.disabled = true;
                        }

                        //Hide dependent grid
                        if (document.store_productsSearch.s_product_id.selectedIndex == "") {
                              if (spanToHide != "") {
                                    if (DomYes) {
                                          document.getElementById(spanToHide).style.display="none";
                                    } else {
                                          document.all[spanToHide].style.display="none";
                                    }
                              }
                        }
                  }


                  var Product = new Array(

                  new Array(12,7,"Canvas prints"),
                  new Array(11,7,"Foam mounted pictures"),
                  new Array(10,7,"Lasting posters"),
                  new Array(13,7,"Photographic resizing")
                  );


                  function initPage(){
                        document.store_productsSearch.s_product_id.disabled=true;
                  }
            </script>
      </head>
<body onload="initPage();">
      <form name="store_productsSearch">
            <select onchange="set_child_listbox(this, document.store_productsSearch.s_product_id,Product,'Products');" name="s_category_id">
                  <option value="" selected>Select Value</option>
                  <OPTION VALUE="5">Flyers</OPTION>
                  <OPTION VALUE="1">Photos</OPTION>
                  <OPTION VALUE="7">PRECIOUS MEMORIES</OPTION>
                  <OPTION VALUE="6">Signage Display products</OPTION>
                  <OPTION VALUE="2">Subscriptions</OPTION>
            </select>

            <select name="s_product_id">
                  <option value="" selected>Select Value</option>
            </select>
            <br>

            <span id="Products">Products Div</span>

      </form>
</body>
</html>

================================
Get back to me with some more details like
Is there any DIV or HTML object which has got a name "Products"
If it is there then why do you need that and why and on what basis you are hiding or showing
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question