is null or not an object error

shaneH

This one has me stumped. I have used it this way before but maybe someone else will see something I am not.

function NewPhone(){
	var phonediv = document.getElementById('addphone').innerHTML;
	var numphone = document.forms["accountfunc"]["numphone"].value;
	numphone++;
	document.forms["accountfunc"]["numphone"].value = numphone;

NPNHTML =	phonediv + 
		"Phone Number " + numphone + ": <input type='text' name='phone" + numphone + "' size='20'><br>";
	document.getElementById('addphone').innerHTML = NPNHTML;
}

<form name="accountfunc" action="index.php?page=newacc&id=<?=$unique_id?>" method="post">

<!--tons of code here-->

<input name="numphone" type="hidden" value="1">
<div id="addphone">
Phone Number: <input type="text" name="phone1" size="20"><br>
</div>

Firefox error

document.forms.accountfunc has no prperties

IE error message

document.accountfunc.numphone is null or not an object

The errors both reference this line from the above code

var numphone = document.forms["accountfunc"]["numphone"].value;

Just so you know what I am doing. This is part of a form that will be for entering new accounts. Some times the accounts have multiple phone numbers. So instead of a bunch of empty fields or not enough fields. I am creating it to generate enough fields per the users specifications. Obviously you can see it will also get and generate a hidden value so the proccesing code knows how many phone numbers will need to be submited and each phone numer field will be getting its own name for that processing.

Now initially the firefox error made me think I had a spelling error in the form name or it wasn't seeing the form in the DOM structure. So rechecked spelling and tried moving the <form> line to see if it would work. I have also tried a few different ways of typing out the variable and it all still gives me the same error.

Any thoughts on this one are appreciated. Maybe I am even just doing it all backwards, feel free to say so.

suntra

Set "id" for every form and input tags, and then simply make a direct call with document.getElementById...

shaneH

I was aware that is a work around just some how I don't think that is the best way to do it. If we were suppose to have done it that way why would the other option be there.

Further the code above should work, I think, and I am kind of interested in knowing why it doesn't.

Weedpacket

In valid HTML, "name" isn't a legitimate attribute for <form> elements. If you need to identify a form that's what the "id" attribute is for.

shaneH wrote:
If we were suppose to have done it that way why would the other option be there.

Fossils left over from the bad old days last century before Javascript was standardised and before the DOM was standardised (getElementById() was introduced in 2000) and before browser manufacturers started paying a bit more attention to HTML standards and the browsers were reinvented as DOM+stylesheet viewers instead of ad hoc collections of rendering rules. Be thankful you didn't have to do any development back in those days.

As for why your code doesn't work, it's impossible to say: what you've supplied is incomplete in that, for example, it doesn't give any indication about when or how the function is called.

Try to trim the page down by removing irrelevant fields and text and layout and stuff to the smallest complete document that continues to show the error and post that.

For example, this:

<html><head><script>
function NewPhone(){
	var phonediv = document.getElementById('addphone').innerHTML;
	var numphone = document.forms["accountfunc"]["numphone"].value;
	numphone++;
	document.forms["accountfunc"]["numphone"].value = numphone;

NPNHTML =	phonediv + 
		"Phone Number " + numphone + ": <input type='text' name='phone" + numphone + "' size='20'><br>";
	document.getElementById('addphone').innerHTML = NPNHTML;
}</script>
</head>
<body>
<form name="accountfunc" action="index.php?page=newacc&id=<?=$unique_id?>" method="post">

<!--tons of code here-->

<input name="numphone" type="hidden" value="1"><input type='button' onclick='NewPhone()' />
<div id="addphone">
Phone Number: <input type="text" name="phone1" size="20"><br>
</div>

doesn't show the error. So whatever is wrong - you've removed it.

shaneH

Now that explantion makes sense.

The sad part it that I found examples of how to use the "document.forms. ["formname"]["fieldname"].value" in tutorials ranging in date from a few months ago to, well, at least several years back. I guess nobody else has figured it out yet. Certainly, it causes unneeded headachs for those of us who don't use this stuff all the time.

Yea I did notice it works without all the other junk. But without all the other stuff it is kind of useless. I found also with another part of my javascript, that had an error, that it was over come by simply changing where/when certain lines were dynamically generated. It is very baffling. Guess thats what happen when standards are ignored.

Weedpacket

shaneH wrote:
I guess nobody else has figured it out yet.

Or you're just looking in the wrong place. After all, the modern technique has already been suggested in this thread.

But without all the other stuff it is kind of useless.

That's why I suggested starting with the full page and removing bits. And I'm not suggesting that you throw away all the rest, I said it was so that you'd have something to post here.