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.c reateElement("T R");
myTR.setAttribu te("id","RESULT S4");
// create cell 1 and content
myTD=document.c reateElement("T D");
//create input items
myINPUT=documen t.createElement ("INPUT");
myINPUT.setAttr ibute("type","t ext");
myINPUT.setAttr ibute("readonly ");
myINPUT.setAttr ibute("classNam e","grey");
myINPUT.setAttr ibute("name","N AME4");
myINPUT.setAttr ibute("maxlengt h","35");
myINPUT.setAttr ibute("size","3 5");
myINPUT.setAttr ibute("value"," somevalue");
//append the input to the cell
myTD.appendChil d(myINPUT);
myTR.appendChil d(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]

Re: adding an input element



Michael Hill wrote:
[color=blue]
> 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.c reateElement("T R");
> myTR.setAttribu te("id","RESULT S4");
> // create cell 1 and content
> myTD=document.c reateElement("T D");
> //create input items
> myINPUT=documen t.createElement ("INPUT");
> myINPUT.setAttr ibute("type","t ext");
> myINPUT.setAttr ibute("readonly ");
> myINPUT.setAttr ibute("classNam e","grey");
> myINPUT.setAttr ibute("name","N AME4");
> myINPUT.setAttr ibute("maxlengt h","35");
> myINPUT.setAttr ibute("size","3 5");
> myINPUT.setAttr ibute("value"," somevalue");
> //append the input to the cell
> myTD.appendChil d(myINPUT);
> myTR.appendChil d(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[/color]

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

for ( var i=0; i<document.upda te.elements.len gth; i++ )
{
if ( document.update .elements[i].name.substr(0, 4) == "NAME" )
{
alert(document. update.elements[i].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]

Re: adding an input element

Michael Hill wrote:
[color=blue]
>
> Michael Hill wrote:
>
>[color=green]
>>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.c reateElement("T R");
>> myTR.setAttribu te("id","RESULT S4");[/color][/color]

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

[color=blue][color=green]
>> // create cell 1 and content
>> myTD=document.c reateElement("T D");
>> //create input items
>> myINPUT=documen t.createElement ("INPUT");
>> myINPUT.setAttr ibute("type","t ext");[/color][/color]

myINPUT.type = "text";

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-62883744

[color=blue][color=green]
>> myINPUT.setAttr ibute("readonly ");[/color][/color]

Here, setAttribute must take 2 parameters and you only provide one. So,
I think this won't succeed.
Instead,
myINPUT.disable d = true;

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-50886781

[color=blue][color=green]
>> myINPUT.setAttr ibute("classNam e","grey");[/color][/color]

myINPUT.classNa me = "gray";

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95362176

[color=blue][color=green]
>> myINPUT.setAttr ibute("name","N AME4");
>> myINPUT.setAttr ibute("maxlengt h","35");
>> myINPUT.setAttr ibute("size","3 5");
>> myINPUT.setAttr ibute("value"," somevalue");
>> //append the input to the cell[/color][/color]

myINPUT.name = "NAME4";
myINPUT.maxLeng th = 35;
// attribute long maxLength;
myINPUT.size = 35;
// Modified in DOM Level 2:
// attribute unsigned long size;
myINPUT.value = "somevalue" ;
[color=blue][color=green]
>> myTD.appendChil d(myINPUT);[/color][/color]

Right here, before inserting the myINPUT object, you may want to "alert"
all of its properties to see if everything went well.
[color=blue][color=green]
>> myTR.appendChil d(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[/color]
>
>
> Additional information ...... In fact when I use:
>
> for ( var i=0; i<document.upda te.elements.len gth; i++ )
> {
> if ( document.update .elements[i].name.substr(0, 4) == "NAME" )
> {
> alert(document. update.elements[i].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
>
>
>[/color]

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]

Re: adding an input element



Michael Hill wrote:
[color=blue]
> 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'>[/color]
[color=blue]
> myINPUT=documen t.createElement ("INPUT");
> myINPUT.setAttr ibute("type","t ext");
> myINPUT.setAttr ibute("readonly ");
> myINPUT.setAttr ibute("classNam e","grey");
> myINPUT.setAttr ibute("name","N AME4");
> myINPUT.setAttr ibute("maxlengt h","35");
> myINPUT.setAttr ibute("size","3 5");
> myINPUT.setAttr ibute("value"," somevalue");
> //append the input to the cell
> myTD.appendChil d(myINPUT);
> myTR.appendChil d(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".[/color]

Is that IE on Windows? Unfortunately with that browser you would need to use
var myINPUT = document.create Element(
'<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.create Element('input' );
myINPUT.id = myINPUT.name = 'NAME4';
then IE should be able to address
document.formNa me.elements['NAME4']
later
--

Martin Honnen

http://JavaScript.FAQTs.com/

[Michael Hill]

Re: adding an input element



Martin Honnen wrote:
[color=blue]
> Michael Hill wrote:
>[color=green]
> > 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'>[/color]
>[color=green]
> > myINPUT=documen t.createElement ("INPUT");
> > myINPUT.setAttr ibute("type","t ext");
> > myINPUT.setAttr ibute("readonly ");
> > myINPUT.setAttr ibute("classNam e","grey");
> > myINPUT.setAttr ibute("name","N AME4");
> > myINPUT.setAttr ibute("maxlengt h","35");
> > myINPUT.setAttr ibute("size","3 5");
> > myINPUT.setAttr ibute("value"," somevalue");
> > //append the input to the cell
> > myTD.appendChil d(myINPUT);
> > myTR.appendChil d(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".[/color]
>
> Is that IE on Windows? Unfortunately with that browser you would need to use
> var myINPUT = document.create Element(
> '<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.create Element('input' );
> myINPUT.id = myINPUT.name = 'NAME4';
> then IE should be able to address
> document.formNa me.elements['NAME4']
> later
> --
>
> Martin Honnen
> http://JavaScript.FAQTs.com/[/color]

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.create Element("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.getEle mentById("list" ).rows;
while ( rows.length > 0 )
{
var mytr = rows[0];
mytr.parentNode .removeChild(my tr);
}

[Martin Honnen]

Re: adding an input element



Michael Hill wrote:

[color=blue]
> If now I want to remove a row that I had previously identified it as:
>
> myTR = document.create Element("TR");
> myTR.id = "MYROW4";
>
> How would I delete this one row?[/color]

You delete any node with
nodeObject.pare ntNode.removeCh ild(nodeObject)
thus if you still have access to the variable myTR
myTR.parentNode .removeChild(my TR)
In general you should check
if (myTR.parentNod e && myTR.parentNode .removeChild)
before calling the method.
If you don't have acess to the variable myTR any longer then use
document.getEle mentById to find the row:
var myTR;
if (document.getEl ementById) {
myTR = document.getEle mentById('MYROW 4');
if (myTR.parentNod e && myTR.parentNode .removeChild) {
myTR.parentNode .removeChild(my TR);
}
}


--

Martin Honnen

http://JavaScript.FAQTs.com/

[Michael Hill]

Re: adding an input element



Michael Hill wrote:
[color=blue]
> Part 1.1 Type: Plain Text (text/plain)
> Encoding: 7bit[/color]

I got it:

var rows = document.getEle mentById("list" );
var temp = document.getEle mentById("NAME4 ");
rows.removeChil d(temp);