How to set the Name of a button by JavaScript

[Stefan Mueller]

How can I set the Name of a button?
I tried
xelement = document.createElement("input")
xelement.type = "button"
xelement.name = "MyButton"
but it does not work with the Internet Explorer (Mozilla is fine). I don't
get an error message but if I try to address this button by its name
e.g. document.getElementsByName("MyButton")[0].style.visibility = "hidden"
I get with the Internet Explorer (Mozilla works fine) the following error
message:
Error: 'document.getElementsByName(...).0.style' is null or not an object
Code: 0

 

[Julian Turner]

How can I set the Name of a button?
I tried
xelement = document.createElement("input")
xelement.type = "button"
xelement.name = "MyButton"
but it does not work with the Internet Explorer (Mozilla is fine). I don't
get an error message but if I try to address this button by its name
e.g. document.getElementsByName("MyButton")[0].style.visibility = "hidden"
I get with the Internet Explorer (Mozilla works fine) the following error
message:
Error: 'document.getElementsByName(...).0.style' is null or not an object
Code: 0

Don't know if this helps, but take a look at this:-

http://msdn.microsoft.com/library/d...dhtml/reference/methods/getelementsbyname.asp

Quote from that page:

"Microsoft JScript allows the name to be changed at run time. This does
not cause the name in the programming model to change in the collection
of elements, but it does change the name used for submitting elements.

The NAME attribute cannot be set at run time on elements dynamically
created with the createElement method. To create an element with a name
attribute, include the attribute and value when using the createElement
method.

var oAnchor = document.createElement("<A NAME='AnchorName'></A>");"

Julian

 

[Martin Honnen]

Stefan Mueller wrote:

I tried
xelement = document.createElement("input")
xelement.type = "button"
xelement.name = "MyButton"
but it does not work with the Internet Explorer . I don't
get an error message but if I try to address this button by its name
e.g. document.getElementsByName("MyButton")[0].style.visibility = "hidden"
I get with the Internet Explorer (Mozilla works fine) the following error
message:
Error: 'document.getElementsByName(...).0.style' is null or not an object

This is a known and nasty problem with IE which is documented on MSDN,
for some reasons their implementation is not able to properly set the
name on element objects created the standard way
document.createElement('tagname')
If it is a button it is usually easy to simply do
xelement.id = xelement.name = 'MyButton'
and then that way you can access the button with document.getElementById
the same way other elements can be accessed by its id. Only make sure
the id is unique in the document. Of course the id does not need to be
the same as the name.

If you really need to set the name to access the element by its name
then there are various workarounds, MSDN
<http://msdn.microsoft.com/library/d.../author/dhtml/reference/properties/name_2.asp>
suggests to use the non standard and IE specific
var input = document.createElement(
'<input type="radio" name="radioName">');
This works in IE/Win (I think IE/Mac does not like that) and creates the
element object with proper type and name but that argument with some
markup in the call to createElement will give you lots of problems in
other implementations as some implementations will throw an execption,
others will return null, so it is a pain then to write script to deal
with all implementations.

Doing
var dummyDiv = document.createElement('div');
dummyDiv.innerHTML = '<input type="radio" name="radioName">';
var input = dummyDiv.firstChild;
is sort of a hack too but as far as I am aware does not need browser
specific code forks as IE 5 and onwards, Mozilla 1.0 and later, Netscape
6 and later, Opera 7 and later support that in HTML documents.

 

[Stefan Mueller]

Thanks a lot
xelement.id = xelement.name = "MyButton"
works great.

Even
document.getElementsByName("MyButton")[0].style.visibility = "hidden"
is working. To my surprise I don't need to use document.getElementById.

In whatever way, I don't understand the command 'xelement.id = xelement.name
= "MyButton"' with two '=' but it works. I'm really happy.

Many thanks
Stefan

 

[Martin Honnen]

Stefan Mueller wrote:

In whatever way, I don't understand the command 'xelement.id = xelement.name
= "MyButton"' with two '=' but it works.

It is simply a shorthand for
xelement.name = 'MyButton';
xelement.id = 'MyButton';
An assignment is an expression that evaluates to the assigned value so
you can chain them the way I did.

 

[Stefan Mueller]

It is simply a shorthand for

xelement.name = 'MyButton';
xelement.id = 'MyButton';
An assignment is an expression that evaluates to the assigned value so you
can chain them the way I did.

Thanks for the explanation.
But I thought
xelement.name = 'MyButton'
does not work.
Does it mean that
xelement.id = 'MyButton'
does the trick?

Stefan

 

[Martin Honnen]

Stefan Mueller wrote:

But I thought
xelement.name = 'MyButton'
does not work.

It does not quite do in IE/Win what it should do, when the form is
submitted the name=value pair will be submitted (meaning somehow IE
notices the name assigment) but finding the element by its name does not
work (meaning the DOM structures are not updated properly with the name
assigment). But of course it works in other browsers so I use and
suggested to use to set both the name and the id

Does it mean that
xelement.id = 'MyButton'
does the trick?

as setting the id in addition to the name then allows proper form
submission and finding the element in the DOM across browsers.

 

[Stefan Mueller]

Thanks a lot for the explanation.

Stefan