adding an input element

[Michael Hill]

I have this code that adds a table row and within the cells I create
some input elements. When I go back using javascript the functionaliuty
is seeing the form element. Anyone tell why I can see them?

<form name='update'>

myTR=document.createElement("TR");
myTR.setAttribute("id","RESULTS4");
// create cell 1 and content
myTD=document.createElement("TD");
//create input items
myINPUT=document.createElement("INPUT");
myINPUT.setAttribute("type","text");
myINPUT.setAttribute("readonly");
myINPUT.setAttribute("className","grey");
myINPUT.setAttribute("name","NAME4");
myINPUT.setAttribute("maxlength","35");
myINPUT.setAttribute("size","35");
myINPUT.setAttribute("value","somevalue");
//append the input to the cell
myTD.appendChild(myINPUT);
myTR.appendChild(myTD);

So, if when I call the input value the element is not found like:
temp1 = document.update.elements["NAME4"].value;
alert(temp1);

The error message is: "null or not an object". Somehow this element is
not getting added to the form "update".

Any help is appreciated.

Mike

 

[Michael Hill]

I have this code that adds a table row and within the cells I create
some input elements. When I go back using javascript the functionaliuty
is seeing the form element. Anyone tell why I can see them?

<form name='update'>

myTR=document.createElement("TR");
myTR.setAttribute("id","RESULTS4");
// create cell 1 and content
myTD=document.createElement("TD");
//create input items
myINPUT=document.createElement("INPUT");
myINPUT.setAttribute("type","text");
myINPUT.setAttribute("readonly");
myINPUT.setAttribute("className","grey");
myINPUT.setAttribute("name","NAME4");
myINPUT.setAttribute("maxlength","35");
myINPUT.setAttribute("size","35");
myINPUT.setAttribute("value","somevalue");
//append the input to the cell
myTD.appendChild(myINPUT);
myTR.appendChild(myTD);

So, if when I call the input value the element is not found like:
temp1 = document.update.elements["NAME4"].value;
alert(temp1);

The error message is: "null or not an object". Somehow this element is
not getting added to the form "update".

Any help is appreciated.

Mike

Additional information ...... In fact when I use:

for ( var i=0; i<document.update.elements.length; i++ )
{
if ( document.update.elements.name.substr(0,4) == "NAME" )
{
alert(document.update.elements.name);
}
}
I see the first 3 elements that were there when the html was executed,
including the element "NAME4" using this for loop.

alert("3 " + document.update.elements["NAME3"].value ); produces valid
data
alert("4 " + document.update.elements["NAME4"].value ); error message
null or not an object

 

[DU]

Michael Hill wrote:

Browsers overall have a better support for assigning values to specific
attributes than when resorting to a general-purpose method like
setAttribute. This is confirmed by other reviewers too.

"General rule: don't use setAttribute() when a better way of setting the
attribute is available" Peter-Paul Koch
http://www.quirksmode.org/dom/w3c_core.html#attributes

So, here, just

myTR.id = "RESULTS4";
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-63534901

myINPUT.type = "text";
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-62883744

Here, setAttribute must take 2 parameters and you only provide one. So,
I think this won't succeed.
Instead,
myINPUT.disabled = true;
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-50886781


myINPUT.className = "gray";
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95362176

myINPUT.name = "NAME4";
myINPUT.maxLength = 35;
// attribute long maxLength;
myINPUT.size = 35;
// Modified in DOM Level 2:
// attribute unsigned long size;
myINPUT.value = "somevalue";

Right here, before inserting the myINPUT object, you may want to "alert"
all of its properties to see if everything went well.

myTR.appendChild(myTD);

So, if when I call the input value the element is not found like:
temp1 = document.update.elements["NAME4"].value;
alert(temp1);

The error message is: "null or not an object". Somehow this element is
not getting added to the form "update".

Any help is appreciated.

Mike

Additional information ...... In fact when I use:

for ( var i=0; i<document.update.elements.length; i++ )
{
if ( document.update.elements.name.substr(0,4) == "NAME" )
{
alert(document.update.elements.name);
}
}
I see the first 3 elements that were there when the html was executed,
including the element "NAME4" using this for loop.

alert("3 " + document.update.elements["NAME3"].value ); produces valid
data
alert("4 " + document.update.elements["NAME4"].value ); error message
null or not an object

Then that means you also have a problem with the number of iterations or
the dynamically created inputs have not been integrated into the
document yet at the memory level. I can not see your whole code, so
impossible to say.

Your for loop is supposed to iterate the alert "i + 1" times. I
recommend appending all the info into 1 string which you can "alert" at
the end of the for loop.

Also, you would need to provide the browser and browser version in which
the problem happens.

DU

 

[Martin Honnen]

I have this code that adds a table row and within the cells I create
some input elements. When I go back using javascript the functionaliuty
is seeing the form element. Anyone tell why I can see them?

<form name='update'>

myINPUT=document.createElement("INPUT");
myINPUT.setAttribute("type","text");
myINPUT.setAttribute("readonly");
myINPUT.setAttribute("className","grey");
myINPUT.setAttribute("name","NAME4");
myINPUT.setAttribute("maxlength","35");
myINPUT.setAttribute("size","35");
myINPUT.setAttribute("value","somevalue");
//append the input to the cell
myTD.appendChild(myINPUT);
myTR.appendChild(myTD);

So, if when I call the input value the element is not found like:
temp1 = document.update.elements["NAME4"].value;
alert(temp1);

The error message is: "null or not an object". Somehow this element is
not getting added to the form "update".

Is that IE on Windows? Unfortunately with that browser you would need to use
var myINPUT = document.createElement(
'<input type="text" name="NAME4">'
)
if you want to address the input later by its name in the elements
collection.
Or as long as you have unique names I suggest to use
var myINPUT = document.createElement('input');
myINPUT.id = myINPUT.name = 'NAME4';
then IE should be able to address
document.formName.elements['NAME4']
later

 

[Michael Hill]

I have this code that adds a table row and within the cells I create
some input elements. When I go back using javascript the functionaliuty
is seeing the form element. Anyone tell why I can see them?

<form name='update'>

myINPUT=document.createElement("INPUT");
myINPUT.setAttribute("type","text");
myINPUT.setAttribute("readonly");
myINPUT.setAttribute("className","grey");
myINPUT.setAttribute("name","NAME4");
myINPUT.setAttribute("maxlength","35");
myINPUT.setAttribute("size","35");
myINPUT.setAttribute("value","somevalue");
//append the input to the cell
myTD.appendChild(myINPUT);
myTR.appendChild(myTD);

So, if when I call the input value the element is not found like:
temp1 = document.update.elements["NAME4"].value;
alert(temp1);

The error message is: "null or not an object". Somehow this element is
not getting added to the form "update".

Is that IE on Windows? Unfortunately with that browser you would need to use
var myINPUT = document.createElement(
'<input type="text" name="NAME4">'
)
if you want to address the input later by its name in the elements
collection.
Or as long as you have unique names I suggest to use
var myINPUT = document.createElement('input');
myINPUT.id = myINPUT.name = 'NAME4';
then IE should be able to address
document.formName.elements['NAME4']
later

Thanks DU amd Martin for your help. I have implemented both your suggestions.

The browser is IE 5.5 and 6.0.

Finding the element didn't work using:

myINPUT.name = 'NAME4';

until I also made the change to:

myINPUT.id = myINPUT.name = 'NAME4';

then it did. Seems cludgy, but it works,

If now I want to remove a row that I had previously identified it as:

myTR = document.createElement("TR");
myTR.id = "MYROW4";

How would I delete this one row? I know I can delete all the rows in hte table
by using this:

var rows = document.getElementById("list").rows;
while ( rows.length > 0 )
{
var mytr = rows[0];
mytr.parentNode.removeChild(mytr);
}

 

[Martin Honnen]

Michael Hill wrote:

If now I want to remove a row that I had previously identified it as:

myTR = document.createElement("TR");
myTR.id = "MYROW4";

How would I delete this one row?

You delete any node with
nodeObject.parentNode.removeChild(nodeObject)
thus if you still have access to the variable myTR
myTR.parentNode.removeChild(myTR)
In general you should check
if (myTR.parentNode && myTR.parentNode.removeChild)
before calling the method.
If you don't have acess to the variable myTR any longer then use
document.getElementById to find the row:
var myTR;
if (document.getElementById) {
myTR = document.getElementById('MYROW4');
if (myTR.parentNode && myTR.parentNode.removeChild) {
myTR.parentNode.removeChild(myTR);
}
}

 

[Michael Hill]

Part 1.1 Type: Plain Text (text/plain)
Encoding: 7bit

I got it:

var rows = document.getElementById("list");
var temp = document.getElementById("NAME4");
rows.removeChild(temp);