Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Problem with duplicate function

Status
Not open for further replies.

Coogan

Programmer
Jun 21, 2004
38
GB
Hi Folks,

I have a problem with the section of code below.

The function populate works fine but the function populate2 generates the error 'length is null or not an object'

Any ideas on why this is happening??

Code:
function populate()
{
	var box = document.forms[0].first;
	var number = box.options[box.selectedIndex].value;
	if (!number) return;
	var list = adddes[number];
	var box2 = document.forms[0].second;
	box2.options.length = 0;
	for(i=0;i<list.length;i+=1)
	{
		box2.options[i] = new Option(list[i],list[i]);
	}
}

function populate2()
{
	var box = document.forms[0].second;
	var number = box.options[box.selectedIndex].value;
	if (!number) return;
	var list = adddes[number];
	var box2 = document.forms[0].third;
	box2.options.length = 0;
	for(i=0;i<list.length;i+=1)
	{
		box2.options[i] = new Option(list[i],list[i]);
	}
}
 

Given that you've provided absolutely no details whatsoever about the elements on the form (we can only assume that "third" is a select control), it would be hard to say.

Can you post the form code that goes with the JS code?

Dan
 
Dan,

My apologies. Should have added this in the first post.

The code that I have for the form is as follows:

Code:
<center>
<form>
<SELECT SIZE=5 NAME="first" WIDTH=200 onChange="populate()">
	<OPTION VALUE="0">Billing Errors</OPTION>
	<OPTION VALUE="1">Delayed Installation</OPTION>
	<OPTION VALUE="2">Service Failure / Outage</OPTION>
	<OPTION VALUE="3">Missale / Regrades / Movers</OPTION>
</SELECT>
<BR>
<BR>
<SELECT SIZE=4 NAME="second" WIDTH=200 onChange="populate2()">
	<OPTION>Please select an option from above</OPTION>
</SELECT>
<BR>
<BR>
<SELECT SIZE=5 NAME="third" WIDTH=200>
	<OPTION>Please select an option from above</OPTION>
</SELECT>
</form>
</center>

Thanks

Martin
 

Where is "adddes" defined? What does it contain? You haven't said if it the "box2.options.length" or the "list.length" that is causing the problem.

Can you just post your complete source? Or a URL to it? I hate these back-and-forth type threads where we keep having to prise more information out of a poster just to be able to help them.

Dan
 
Dan,

here is the full source of the page that I have coded so far.

Code:
<html>
<head>
<title>Agent Information Centre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language=JavaScript>
var adddes = new Array();

adddes[0] = new Array(
	'Billing Error Correction',
	'Billing Adjustments');

adddes[1] = new Array(
	'Delayed Installation (GWG)',
	'Delayed Installation (ADJ)');

adddes[2] = new Array(
	'Service Failure / Outage (GWG)',
	'Not HTT (ADJ)');

adddes[3] = new Array(
	'Mis-sales (ADJ)',
	'Mis-sales (GWG)',
	'Business Movers (ADJ)');

function populate()
{
	var box = document.forms[0].first;
	var number = box.options[box.selectedIndex].value;
	if (!number) return;
	var list = adddes[number];
	var box2 = document.forms[0].second;
	box2.options.length = 0;
	for(i=0;i<list.length;i+=1)
	{
		box2.options[i] = new Option(list[i],list[i]);
	}
}

function populate2()
{
	var box = document.forms[0].second;
	var number = box.options[box.selectedIndex].value;
	if (!number) return;
	var list = adddes[number];
	var box2 = document.forms[0].third;
	box2.options.length = 0;
	for(i=0;i<list.length;i+=1)
	{
		box2.options[i] = new Option(list[i],list[i]);
	}
}
</script>

<body>

<center>
<form>
<SELECT SIZE=5 NAME="first" WIDTH=200 onChange="populate()">
	<OPTION VALUE="0">Billing Errors</OPTION>
	<OPTION VALUE="1">Delayed Installation</OPTION>
	<OPTION VALUE="2">Service Failure / Outage</OPTION>
	<OPTION VALUE="3">Missale / Regrades / Movers</OPTION>
</SELECT>
<BR>
<BR>
<SELECT SIZE=4 NAME="second" WIDTH=200 onChange="populate2()">
	<OPTION>Please select an option from above</OPTION>
</SELECT>
<BR>
<BR>
<SELECT SIZE=5 NAME="third" WIDTH=200>
	<OPTION>Please select an option from above</OPTION>
</SELECT>
</form>
</center>

</body>
</html>

The problem is with the list.length in the populate2 function

Thanks

Martin
 

The problem is that when you are creating your new options, you are assigning the text to the value, so the values don't come through as 0, 1, 2, etc - they come through the same as the option text.

Change both occurrences of this:

Code:
new Option(list[i],list[i]);

to this:

Code:
new Option(list[i], i);

and all starts working again.

Hope this helps,
Dan
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top