is null or not an object error

[andybeh]

Hi All,

I'm pretty much a novice at javascript and have a hit a roadblock with a piece of code. I have a form which automatically adds new fields when the user tabs off of a certain field. This part of the code works fine, however when I try to set the options for a newly created 'select' box, I receive an error that the form element is null or not an object. As you can see in the code below, I have tried debugging the code by alerting all of the form values to screen. The name of the newly created 'select' element appears so to my understanding it is now a valid form element. I have also tried checking to see if it is a
null value and it skips through this check which indicates to me that it is neither a null value nor an invalid object. So can anyone see anything glaringly obvious in the code below (apart from the fact that it probably isn't the tidiest code ever written)?


<SCRIPT LANGUAGE="JavaScript">
<!--
function createResource(val)
{
var departmentVal = val.value;
var lineID = document.updateCar.elements ["form_count"].value;
var resourceID = 'frmResource' + lineID;
var objOption = document.createElement("option");
var cnt;
cnt = 0;
for(var i=0;i<document.updateCar.elements.length;i++)
{
// alert(document.updateCar.elements.name + ' **' +
document.updateCar.elements.value + '**');
}
//alert(document.updateCar.elements["frmResource" + lineID].value);
if (document.updateCar.elements["frmResource" + lineID] == '')
{
alert('the value is null');
}
document.updateCar.elements["frmResource" +
lineID].options[cnt]=new Option('Select A Resource', 'X', false,
false);
document.updateCar.elements["frmResource" +
lineID].options.length=0
}
//-->
</script>

The line that errors out is:

if (document.updateCar.elements["frmResource" + lineID] == '')

Cheers

ab

 

[cLFlaVA]

the most obvious error is that the line should read:

if (document.updateCar.elements["frmResource" + lineID][red].value[/red] == '')

*cLFlaVA
----------------------------
[tt]( <P> <B>)¹³ * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[andybeh]

I changed that line, but it still presents the "is null or not an object" error. When it looped through all the form elements, it displayed the field name so I'm still stuck.

Cheers

ab

 

[BillyRayPreachersSon]

My money says this happens in IE but not Firefox, as I hit the exact same issue at work last week and still haven't solved it.

Will let you know if I do, though.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[andybeh]

Hi Dan,

I actually just installed Firefox and Netscape to test it and neither of them even created the form elements. I have to admit, I am now looking at non javascript options to get this done even though they will be more cumbersome.

cheers

ab

 

[cLFlaVA]

where are you appending your new object to the form?



*cLFlaVA
----------------------------
[tt]( <P> <B>)¹³ * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[andybeh]

This is the code that I am using:

<script type="text/javascript">
var cnt=0;
function newForm(objid)
{
cnt++;
document.getElementById('form_count').value=cnt;
obj=document.getElementById(objid);
var dup=obj.cloneNode(true);
var ie=(document.all && !window.opera)?1:0;
var tblbody=dup.childNodes;
for(h=0;h<tblbody.length;h++)
{
if(tblbody[h].tagName&&tblbody[h].tagName.toLowerCase()=="tbody")
{
for(i=0;i<tblbody[h].childNodes.length;i++)
{
var tbltr=dup.childNodes[h].childNodes
if(tbltr.tagName&&tbltr.tagName.toLowerCase()=="tr")
{
for(j=0;j<tbltr.childNodes.length;j++)
{
var tbltd=dup.childNodes[h].childNodes.childNodes;
if(tbltd[j].tagName&&tbltd[j].tagName.toLowerCase()=="td")
{
for(k=0;k<tbltd[j].childNodes.length;k++)
{
var cell_cont=dup.childNodes[h].childNodes.childNodes[j].childNodes;
if(cell_cont[k].name)
{
var ele=cell_cont[k];
var str=ele.name.substring(0,ele.name.length-1);
if(ele.type.toLowerCase()=="radio")
{
if(ie)
{
var rd=document.createElement('<input name="' + str+cnt +'">');
}
else
{
var rd=document.createElement("input");
rd.name=str+cnt;
}
rd.setAttribute('type','radio');
rd.value=ele.value;
ele=tbltd[j].replaceChild(rd,cell_cont[k]);
}
else if(ele.type.toLowerCase()=="checkbox")
{
ele.value="";
ele.name=str+cnt;
}
else if(ele.type.toLowerCase()=="select")
{
ele.name=str+cnt;;
}
else
{
ele.value="";
ele.name=str+cnt;
}
}
if((ele.name.substring(0,14) == 'frmProcessType') || (ele.name.substring(0,11) == 'frmResource') || (ele.name.substring(0,13) == 'frmDepartment'))
{
ele.value = "X";
}
}
}
}
}
}
}
}
dup.id='tbl'+cnt;
document.forms[0].appendChild(dup);
}

function resetCount()
{
document.getElementById('form_count').value=0;
}
</script>

I can't remember where I found it but it does what it is meant to except for resetting all values back to the default. I have an onblur event that triggers on one of the fields in the current row.

ab

 

[BillyRayPreachersSon]

Well - I ended up solving my problem by creating my select element using innerHTML rather than DOM methods.

Them's the breaks!

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]