473,507 Members | 2,387 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

getElementsByName undefined for dynamic elements (radio buttons)

I have a set of radio buttons that are created dynamically, after
rendered I try loop thru this set by getting the length of the set, but
I keep getting an error stating the element is undefined. I am using
getElelementsByName since these are radio buttons, but it seems that
the dynamic element is not seen!!!

This is my code... please let me know if there is anything that I am
doing wrong! - thanks
----
....
....
// this loops thru an ajax structure --- this is correct so I kow is
not an Ajax issue.

for(var i=0; i<ds.Tables[0].Rows.length; i++){
//creating nue input element
var r=document.createElement('<INPUT type=radio name=company >');
r.type="radio";
r.name ="company";
r.id ="myradiobutton" + i;
r.setAttribute("value",ds.Tables[0].Rows[i].roottype);
td_company.appendChild(r);
td_company.appendChild(document.createTextNode(ds. Tables[0].Rows[i].roottypedesc));
}

-----
My function trying to get the lenght of the set is called after the
radion buttons are rendered. If I find one that has an specific value,
I check it.

for(var n=0; n<document.getElementsByName("company").length; n++){
if (document.getElementsByName("company")[n].value == 'msde')
{
document.getElementsByName("country")[n].checked = "checked";
}
}

May 4 '06 #1
22 7914
ASM
Saul a écrit :
I have a set of radio buttons that are created dynamically, after
rendered I try loop thru this set by getting the length of the set, but
I keep getting an error stating the element is undefined. I am using
getElelementsByName since these are radio buttons, but it seems that
the dynamic element is not seen!!!

This is my code... please let me know if there is anything that I am
doing wrong! - thanks
----
...
...
// this loops thru an ajax structure --- this is correct so I kow is
not an Ajax issue.

for(var i=0; i<ds.Tables[0].Rows.length; i++){
//creating nue input element
var r=document.createElement('<INPUT type=radio name=company >');
var r=document.createElement('INPUT');
r.type="radio";
r.name ="company";
r.id ="myradiobutton" + i;
r.setAttribute("value",ds.Tables[0].Rows[i].roottype);
roottype isn't it Java language ?
td_company.appendChild(r);
what is td_company ?
td_company.appendChild(document.createTextNode(ds. Tables[0].Rows[i].roottypedesc));
}

-----
My function trying to get the lenght of the set is called after the
radion buttons are rendered. If I find one that has an specific value,
I check it.

for(var n=0; n<document.getElementsByName("company").length; n++){
if (document.getElementsByName("company")[n].value == 'msde')
{
document.getElementsByName("country")[n].checked = "checked";
}
}


var R = document.getElementsByName("company");
var C = document.getElementsByName("country");
for(var n=0; n<R.length; n++)
if (R[n].value == 'msde') C[n].checked = "checked";

to avoid to re-built these two collections (R & C)
on each loop
--
Stephane Moriaux et son [moins] vieux Mac
May 5 '06 #2
Saul said on 05/05/2006 7:01 AM AEST:
I have a set of radio buttons that are created dynamically, after
rendered I try loop thru this set by getting the length of the set, but
I keep getting an error stating the element is undefined. I am using
getElelementsByName since these are radio buttons, but it seems that
the dynamic element is not seen!!!

This is my code... please let me know if there is anything that I am
doing wrong! - thanks
----
...
...
// this loops thru an ajax structure --- this is correct so I kow is
not an Ajax issue.

for(var i=0; i<ds.Tables[0].Rows.length; i++){
Is ds.Tables an array of table elements? If so, and item[0] is a table,
then it has a 'rows' collection, not 'Rows' (note capitalisation). But
maybe it is some part of your XML structure that is called 'Rows', I
don't know.

Since you sequentially access all rows, it is also better to get a
reference to the row once and go from there.

It is more efficient to get the length attribute once and store it (the
saving may be insignificant if the number of rows is small, but it's the
thought that counts :-) ):

var row, rows = ds.Tables[0].rows;
for(var i=0, len=rows.length; i<len; i++){
row = rows[i];

//creating nue input element
var r=document.createElement('<INPUT type=radio name=company >');
That method of dynamically adding elements is IE specific and will fail
in most (possibly all) other browsers, the W3C DOM standard method is:

var r = document.createElement('input');
r.type = 'radio';
r.name = 'company';

However, if that method is used, IE doesn't recognise the name attribute
in script, though the form will submit correctly. There is a thread
about it here:

<URL:http://groups.google.co.uk/group/comp.lang.javascript/browse_frm/thread/db95b9f62035bee6/a86500f9f5880246?q=name+createElement&rnum=2#a8650 0f9f5880246>

r.type="radio";
r.name ="company";
r.id ="myradiobutton" + i;
r.setAttribute("value",ds.Tables[0].Rows[i].roottype);
setAttribute is buggy in some browsers, it is better (though
non-standard) to access properties directly as you have above:

r.value = ds.Tables[0].Rows[i].roottype;

td_company.appendChild(r);
td_company.appendChild(document.createTextNode(ds. Tables[0].Rows[i].roottypedesc));
Using the suggested row & rows variables above, this becomes:

td_company.appendChild(document.createTextNode(row .roottypedesc));

}

-----
My function trying to get the lenght of the set is called after the
radion buttons are rendered. If I find one that has an specific value,
I check it.

for(var n=0; n<document.getElementsByName("company").length; n++){
if (document.getElementsByName("company")[n].value == 'msde')
{
document.getElementsByName("country")[n].checked = "checked";


Similarly here:

var el, els = document.getElementsByName("company");
for(var n=0, len=els.length; n<len; n++){
el = els[i];
if (el.value == 'msde') {
el.checked = true;
}

--
Rob
Group FAQ: <URL:http://www.jibbering.com/FAQ>
May 5 '06 #3
ASM
RobG a écrit :
Saul said on 05/05/2006 7:01 AM AEST: [...]
for(var n=0; n<document.getElementsByName("company").length; n++){
if (document.getElementsByName("company")[n].value == 'msde')
{
document.getElementsByName("country")[n].checked = "checked";

Similarly here:


Similarly but not duplicately ( "company" != "country" )
var el, els = document.getElementsByName("company");
for(var n=0, len=els.length; n<len; n++){
el = els[i];
if (el.value == 'msde') {
el.checked = true;
}


var el, els = document.getElementsByName("company");
var en, ens = document.getElementsByName("country");
for(var n=0, len=els.length; n<len; n++){
el = els[n]; // and not els[i]
if (el.value == 'msde') {
en = ens[n];
en.checked = true;
}
}
--
Stephane Moriaux et son [moins] vieux Mac
May 5 '06 #4
ASM said on 05/05/2006 12:31 PM AEST:
RobG a écrit :
Saul said on 05/05/2006 7:01 AM AEST:


[...]
for(var n=0; n<document.getElementsByName("company").length; n++){
if (document.getElementsByName("company")[n].value == 'msde')
{
document.getElementsByName("country")[n].checked = "checked";


Similarly here:

Similarly but not duplicately ( "company" != "country" )


Yeah, well, depends on the country, doesn't it? ;-)

var el, els = document.getElementsByName("company");
for(var n=0, len=els.length; n<len; n++){
el = els[i];
if (el.value == 'msde') {
el.checked = true;
}

var el, els = document.getElementsByName("company");
var en, ens = document.getElementsByName("country");
for(var n=0, len=els.length; n<len; n++){
el = els[n]; // and not els[i]
if (el.value == 'msde') {
en = ens[n];
en.checked = true;


If I'd seen company/country I'd likey have done:

var companys = document.getElementsByName("company");
var countries = document.getElementsByName("country");
var n = companys.length;
while (n--){
countries[n].checked = (companies[n].value == 'msde');
}

Of course it's not very tollerant of cases where companys.length is less
than countires.length, but neither was the OP. :-)
--
Rob
Group FAQ: <URL:http://www.jibbering.com/FAQ>
May 5 '06 #5
RobG said on 05/05/2006 12:49 PM AEST:
[...]
var companys = document.getElementsByName("company");
var companies = ...
var countries = document.getElementsByName("country");
var n = companys.length;
var n = companies.length;
while (n--){
countries[n].checked = (companies[n].value == 'msde');
}

Of course it's not very tollerant of cases where companys.length is less


... companies.length ...

--
Rob
Group FAQ: <URL:http://www.jibbering.com/FAQ>
May 5 '06 #6
thanks for your replies...

ds is a dataset coming from an Ajax call and roottype is an element of
this set... I am sure the Ajax call is not the issue(since the data is
obtained and rendered correctly) and this is why I focused in the
javascript part to find the problem.

The elements are createed correctly when I loop thru the array. The
radio buttons are there and are visible inside the div tag "td_company"
The issue arises when trying to reference the element "company" which
is the name given to all the radio buttons created dynamically.

if I write an alert from inside the function creating the radio
buttons, to output the company.length ... I get the correct value.
If I write the alert outside the function I always get a zero. So
trying"

document.getElementsByName("company").length

in the caller function always returns zero and therefore i cannot loop.
- but the radio buttons are there, how can it be zero!
Also using document.getElementsByName("company")[0].value to find out
the value of the first element of the set of radio buttons returns
document.getElementsByName(...)[...].value is undefined.

I tried the different recommendations above, but still get the same
issue! - Any other suggestions

May 5 '06 #7
thanks for your replies...

ds is a dataset coming from an Ajax call and roottype is an element of
this set... I am sure the Ajax call is not the issue(since the data is
obtained and rendered correctly) and this is why I focused in the
javascript part to find the problem.

The elements are createed correctly when I loop thru the array. The
radio buttons are there and are visible inside the div tag "td_company"
The issue arises when trying to reference the element "company" which
is the name given to all the radio buttons created dynamically.

if I write an alert from inside the function creating the radio
buttons, to output the company.length ... I get the correct value.
If I write the alert outside the function I always get a zero. So
trying"

document.getElementsByName("company").length

in the caller function always returns zero and therefore i cannot loop.
- but the radio buttons are there, how can it be zero!
Also using document.getElementsByName("company")[0].value to find out
the value of the first element of the set of radio buttons returns
document.getElementsByName(...)[...].value is undefined.

I tried the different recommendations above, but still get the same
issue! - Any other suggestions

-thanks

May 5 '06 #8
Saul wrote:
thanks for your replies...
Please quote the relevant parts of what you are replying to.

ds is a dataset coming from an Ajax call and roottype is an element of
this set... I am sure the Ajax call is not the issue(since the data is
obtained and rendered correctly) and this is why I focused in the
javascript part to find the problem.
I'll guess that -ds.Tables[0].Rows- is referring to your XML structure,
not the HTMLElement structure suggested by the names you've used.

The elements are createed correctly when I loop thru the array. The
radio buttons are there and are visible inside the div tag "td_company"
The issue arises when trying to reference the element "company" which
is the name given to all the radio buttons created dynamically.
Exactly. IE has trouble with the name attribute of elements added
dynamically - from Microsoft's documentation:

"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."

<URL:http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/...>
Read the thread I suggested provides 2 work-arounds, here it is again;

<URL:http://groups.google.co.uk/group/comp.lang.javascript/browse_frm/thread/db95b9f62035bee6/a86500f9f5880246?q=name+createElement&rnum=2#a8650 0f9f5880246>
[...]
I tried the different recommendations above, but still get the same
issue! - Any other suggestions


Try one of the methods in the suggested thread. Here's mine, I'm sure
you can adapt it to your circumstance:
<script type="text/javascript">

function addRadios(form, grpName, num)
{
var oRadio, e;
var dom = true;
for (var i=0; i<num; ++i){
if (dom){

// Create radio button, give it a name and add to form
oRadio = document.createElement('input');
oRadio.name = grpName;
form.appendChild(oRadio);

// Test if can access radio button group
// If not, remove element and set dom
if ( 0 == i && !document.getElementsByName(grpName).length){
dom = false;
form.removeChild(oRadio);
}
}

// If dom set to false, use IE method to add element
if (!dom){
try {
oRadio = document.createElement('<input type="radio"'
+ ' name="' + grpName + '">');
form.appendChild(oRadio);
} catch (e){ e = true;}

// If got to here and no error, add attributes to element
// and element to document
}
if (!e){
oRadio.type = 'radio';
oRadio.onclick = rbClicked;
oRadio.value = grpName + ' ' + i;
form.appendChild(document.createTextNode('rad-' + i));
form.appendChild(document.createElement('br'));
}
}
}

// A play onclick function to show name is set
function rbClicked(){
alert('Clicked me!'
+ '\nName: ' + this.name
+ '\nValue: ' + this.value);
}
</script>

<form action="" name="aFrom"><div>
<input type="button" value="Add radios"
onclick="addRadios(this.form, 'rBtnGrp', 4);"><br>
<input type="button" value="Click second radio"
onclick="
alert('There are ' + document.getElementsByName('rBtnGrp').length
+ ' radio buttons');
this.form.rBtnGrp[1].click();
"><br>
</div></form>

--
Rob
May 5 '06 #9
RobG wrote:

Exactly. IE has trouble with the name attribute of elements added
dynamically - from Microsoft's documentation:

"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."

<URL:http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/...>


Sorry, should be:

<URL:http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/name_2.asp>
--
Rob
May 5 '06 #10
VK

Saul wrote:
The elements are createed correctly when I loop thru the array. The
radio buttons are there and are visible inside the div tag "td_company"
The issue arises when trying to reference the element "company" which
is the name given to all the radio buttons created dynamically.


<http://www.fleegix.org/articles/2006/04/29/dom-fun-with-ie6-and-form-elements>

May 5 '06 #11
ASM
RobG a écrit :

Try one of the methods in the suggested thread. Here's mine, I'm sure
you can adapt it to your circumstance:
splendid !
that would answer to my IE's bug : type is read only
i.e. when we do : oRadio.type = 'radio';
<script type="text/javascript">

function addRadios(form, grpName, num)
{
var oRadio, e;
var dom = true;
for (var i=0; i<num; ++i){
if (dom){

// Create radio button, give it a name and add to form
oRadio = document.createElement('input');
oRadio.name = grpName;
form.appendChild(oRadio);

// Test if can access radio button group
I'm not sure(*) my IE (Mac) won't acces this new collection
so I prefer to put away all IEs

ie=false; /*@cc_on ie=true; @*/
// If not, remove element and set dom
if ( 0 == i && !document.getElementsByName(grpName).length){
if ( !ie ||
(0==i && !document.getElementsByName(grpName).length)
){
dom = false;
form.removeChild(oRadio);
}
}

// If dom set to false, use IE method to add element
if (!dom){
try {
oRadio = document.createElement('<input type="radio"'
+ ' name="' + grpName + '">');
form.appendChild(oRadio);
} catch (e){ e = true;}

// If got to here and no error, add attributes to element
// and element to document
}
if (!e){
oRadio.type = 'radio';
oRadio.onclick = rbClicked;
oRadio.value = grpName + ' ' + i;
form.appendChild(document.createTextNode('rad-' + i));
form.appendChild(document.createElement('br'));
}
}
} < + '\nValue: ' + this.value); }
</script>

(*) I've tried your example in my IE : yes it knows the new collection
and stops on : oRadio.type = 'radio';
in your function

--
Stephane Moriaux et son [moins] vieux Mac
May 5 '06 #12
ASM
RobG a écrit :
RobG said on 05/05/2006 12:49 PM AEST:
[...]
var companys = document.getElementsByName("company");


var companies = ...


hu? var compagnies = ...
why to use absolutly correct english about variables ?


--
Stephane Moriaux et son [moins] vieux Mac
May 5 '06 #13
On 05/05/2006 02:34, RobG wrote:

[snip]
setAttribute is buggy in some browsers, it is better (though ^^^^^^ non-standard) to access properties directly [...]

^^^^^^^^^^^^
Not at all. The short cut properties are specified in the W3C DOM HTML
module. Their use is entirely 'standard' within a HTML document.

[snip]

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.
May 5 '06 #14
VK

Michael Winter wrote:
On 05/05/2006 02:34, RobG wrote:

[snip]
setAttribute is buggy in some browsers, it is better (though ^^^^^^
non-standard) to access properties directly [...]

^^^^^^^^^^^^
Not at all. The short cut properties are specified in the W3C DOM HTML
module. Their use is entirely 'standard' within a HTML document.


AFAIK they are dealing with completely different domains. While
setAttribute sets *string* values of element attribute node,
element.something = something works with the provided DOM reference.
The first is respectively good only for string values, the second can
hold any data including references. In this aspect I'm aware of any
bugs in setAttribute (?)

But IE indeed has a number of bugs in handling dymanically created form
elements. The relevant bug in application to radio buttons is described
in the article I linked in my previous post.

Here is the bug in action (this is what OP is hitting) :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>$Template$</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
html {
margin: 0px 0px;
padding: 0px 0px}
body {
margin: 10px 10px;
padding: 0px 0px;
font: 1em serif;
color: #000000;
background-color: #FFFFFF}
</style>
<script type="text/javascript">

var fs = null;

function init() {
fs = document.getElementById('fs01');
var rb = null;
for (var i=0; i<10; i++) {
rb = document.createElement('INPUT');
rb.type = 'radio';
rb.name = 'company';
rb.value = i;
fs.appendChild(rb);
}
window.setTimeout('show()',1000);
}

function show() {
var rb = document.getElementsByName('company');
alert(rb.length);
// Firefox shows 10
// IE shows 0
}

window.onload = init;
</script>
</head>

<body<form name="myForm" action=""
<fieldset id="fs01"
<legend>Test</legend
</fieldset
</form
</body>

</html>

May 5 '06 #15
ASM
ASM a écrit :
RobG a écrit :

Here's mine
splendid !


pfft ! unlovely, no it is not :-(

here is what I get with my IE :
http://cjoint.com/?ffp4aJKJf3
after my supposed corrections ...

It appears that :

try {
oRadio = document.createElement('<input type="radio"'
+ ' name="' + grpName + '">');
form.appendChild(oRadio);
}

won't work in my IE (try() works but no result)

I don't understand what is supposed to do :
catch (e){ e = true;}

Anyway in my IE !e is true
so, as oRadio was removed, I don't more have errors and only
form.appendChild(document.createTextNode('rad-' + i));
form.appendChild(document.createElement('br'));
do something
If I code :
try {
oRadio = document.createElement('p');
oRadio.innerHTML= '<input type="radio"' +
' name="' + grpName + '" onclick="rbClicked();">';
form.appendChild(oRadio);
} catch (e){ e = true;}

new radios are 8 ! ! (of course only 4 are visible)
and they have no name :-(
by the way
this.form.rBtnGrp[1].click();
can't reach second button ==> error 'rBtnGrp' unknown

<script type="text/javascript">

function addRadios(form, grpName, num)
{
var oRadio, e;
var dom = true;
for (var i=0; i<num; ++i){
if (dom){

// Create radio button, give it a name and add to form
oRadio = document.createElement('input');
oRadio.name = grpName;
form.appendChild(oRadio);

// Test if can access radio button group


ie=false; /*@cc_on ie=true; @*/
// If not, remove element and set dom
if ( 0 == i && !document.getElementsByName(grpName).length){


// correction : if( ie ...
if ( ie ||
(0==i && !document.getElementsByName(grpName).length)
){
dom = false;
form.removeChild(oRadio);
}
}

// If dom set to false, use IE method to add element
if (!dom){
try {
oRadio = document.createElement('<input type="radio"'
+ ' name="' + grpName + '">');
form.appendChild(oRadio);
} catch (e){ e = true;}

// If got to here and no error, add attributes to element
// and element to document
}
if (!e){
oRadio.type = 'radio';
oRadio.onclick = rbClicked;
oRadio.value = grpName + ' ' + i;
form.appendChild(document.createTextNode('rad-' + i));
form.appendChild(document.createElement('br'));
}
}
}


< + '\nValue: ' + this.value);
}
</script>

--
Stephane Moriaux et son [moins] vieux Mac
May 5 '06 #16
ASM
VK a écrit :

But IE indeed has a number of bugs in handling dymanically created form
elements. The relevant bug in application to radio buttons is described
in the article I linked in my previous post.
and anyway, with IE Mac it's worst :-(

[...] <script type="text/javascript">

var fs = null;

function init() {
fs = document.getElementById('fs01');
var rb = null;
for (var i=0; i<10; i++) {
rb = document.createElement('INPUT');
rb.type = 'radio';


here my IE stops : IE cry on this big error ( type is read only :-( )

--
Stephane Moriaux et son [moins] vieux Mac
May 5 '06 #17
VK

ASM wrote:
and anyway, with IE Mac it's worst :-(

[...]
<script type="text/javascript">

var fs = null;

function init() {
fs = document.getElementById('fs01');
var rb = null;
for (var i=0; i<10; i++) {
rb = document.createElement('INPUT');
rb.type = 'radio';


here my IE stops : IE cry on this big error ( type is read only :-( )


Who needs a IE Mac solution?? This browser is not supported anymore and
not available for download for a year at least.

If rb.type is read-only, then it's the end of the line I guess....

May 5 '06 #18
On 05/05/2006 09:31, RobG wrote:
[snip]
// If dom set to false, use IE method to add element
if (!dom){
try {
oRadio = document.createElement('<input type="radio"'
+ ' name="' + grpName + '">');
form.appendChild(oRadio);
} catch (e){ e = true;}


[snip]

An alternative version that avoids exception handling could look
something like:

/* Takes three arguments and returns a boolean to indicate
* success (true) or failure (false).
*
* groupName - Name used for the new radio button group.
* quantity - Number of radio buttons to add.
* container - Reference to a block-level element, to
* which the new controls will be added.
*/
var addRadioButtons = function() {
function create(name) {
var element = document.createElement('input');

if (element) {
element.name = name;
element.type = 'radio';
}
return element;
}

/* If the host is IE, the function declaration below
* will override the one above.
*/
/*@cc_on @*/
/*@if (@_jscript)
function create(name) {
return document.createElement('<input type="radio" name="'
+ name + '">');
}
@end @*/

return document.createElement && document.createTextNode
? function(groupName, quantity, container) {
if (!container.appendChild) return false;
for (var i = 0; i < quantity; ++i) {
var element, label, text;

if (!(element = create(groupName))
|| !(label = document.createElement('label'))
|| !label.appendChild
|| !(text = document.createTextNode(' radio-' + i)))
return false;
element.value = groupName + '-' + i;
label.appendChild(element);
label.appendChild(text);
container.appendChild(label);
}
return true;
} : function() {
return false;
};
}();

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.
May 5 '06 #19
On 05/05/2006 15:02, VK wrote:

[setAttribute versus equivalent HTML short cut properties]
AFAIK they are dealing with completely different domains.
They are not.
While setAttribute sets *string* values of element attribute node,
element.something = something works with the provided DOM reference.


The defined short cut properties all have types. If the right-hand
operand is not of that type, it will be coerced upon assignment.

For a highly visible example, create a text input element and assign an
object reference to its value property.

[snip]

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.
May 5 '06 #20
JRS: In article <44***********************@news.wanadoo.fr>, dated Fri,
5 May 2006 15:36:22 remote, seen in news:comp.lang.javascript, ASM
<st*********************@wanadoo.fr.invalid> posted :
RobG a écrit :
RobG said on 05/05/2006 12:49 PM AEST:
[...]
var companys = document.getElementsByName("company");


var companies = ...


hu? var compagnies = ...
why to use absolutly correct english about variables ?


It's good to inform foreigners (including the chronologically retarded)
about correct spelling, if it is done economically.

OTOH, there is much to be said for using (on pages in English) variable
names which are not true English words (humor, for example), since then
when using text-searching tools an author can discriminate between the
concealed javascript form and the form shown to the page reader.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
May 6 '06 #21
Michael Winter wrote:
On 05/05/2006 09:31, RobG wrote:
// If dom set to false, use IE method to add element
if (!dom){
try {
oRadio = document.createElement('<input type="radio"'
+ ' name="' + grpName + '">');
form.appendChild(oRadio);
} catch (e){ e = true;}


[snip]

An alternative version that avoids exception handling could look
something like:

/* Takes three arguments and returns a boolean to indicate
* success (true) or failure (false).
*
* groupName - Name used for the new radio button group.
* quantity - Number of radio buttons to add.
* container - Reference to a block-level element, to
* which the new controls will be added.
*/
var addRadioButtons = function() {
function create(name) {
var element = document.createElement('input');

if (element) {
element.name = name;
element.type = 'radio';
}
return element;
}

/* If the host is IE, the function declaration below
* will override the one above.
*/
/*@cc_on @*/
/*@if (@_jscript)
function create(name) {
return document.createElement('<input type="radio" name="'
+ name + '">');
}
@end @*/
[...]


Here is a more general solution to this problem:

/**
* Creates an element of the type specified, using the
* <code>document.createElement()</code> method if supported.
* This method works with MSIE, too, for if JScript is used,
* it is tried to use the start tag as is instead of passing
* only the element type, and adding properties later.
*
* @author
* (C) 2004, 2006 Thomas Lahn &lt;dh******@PointedEars.de&gt;
* @partof
* http://pointedears.de/scripts/dhtml.js
* @param sTag : string
* Start tag or element type of the element to be created.
* Passing a start tag even works if the UA is not MSIE,
* as attributes and values given are parsed from left to
* right into the corresponding element object properties.
* @return type object
* A reference to a new <code>Element</code> object with the
* <code>nodeName</code> property set to <code>sTagName</code>,
* and the <code>localName</code>, <code>prefix</code>,
* and <code>namespaceURI</code> properties set to
* <code>null</code>.
* @see
* @link{dom2-core#ID-2141741547},
* @link{msdn#workshop/author/dhtml/reference/methods/createelement.asp}
* http://pointedears.de/scripts/JSdoc/
*/
function createElement(sTag)
{
var o = null;

if (sTag
&& typeof document != "undefined"
&& dhtml.isMethod(document.createElement))
{
/*@cc_on @*/
/*@if (@_jscript)
o = document.createElement(sTag);
@end @*/

if (!o)
{
var aTagComponents = sTag.replace(/^<?\s*|\s*>?$/g, "")
.replace(/\s+/, " ").replace(/ = /g, "=").split(" ");
o = document.createElement(aTagComponents[0]);
if (o)
{
aTagComponents.shift();
var attrs = aTagComponents.join(" ");
var m;
while ((m = /([^\s=]+)\s*(=\s*(\S+)\s*)?/g.exec(attrs)))
{
setAttr(o, m[1].toLowerCase(), m[3]);
}
}
}
}

return o;
}

/**
* Sets the value of an attribute of an HTMLElement object.
*
* @author
* (C) 2003, 2006 Thomas Lahn &lt;dh******@PointedEars.de&gt;
* @partof
* http://pointedears.de/scripts/dhtml.js
* @param sAttrName: string
* Name of the attribute for which the value should be set.
* Attribute names for which an ECMAScript language binding
* is defined in W3C DOM Level 2 HTML, are automatically
* mapped to the corresponding element object property.
* All attribute names are automatically mapped to their
* camelCased equivalent.
*
* Semicolon-separated style property declarations (in
* form of colon-separated name-value pairs each) of a
* <code>style</code> attribute value are mapped to the
* corresponding properties of the object referenced by
* the <code>style</code> property of the element object.
* Declarations are evaluated from left to right, where
* property values complement or replace the previously
* defined ones.
* @param attrValue
* Value of the attribute to be set. The value is
* converted to number if it can be interpreted as such.
* @returns
* The value of the attribute of the element object;
* a null-string if no matching object exists or if the DOM
* does not provide retrieval of the attribute's values.
*/
function setAttr(o, sAttrName, attrValue)
{
var result = "";

if (o && sAttrName)
{
var attrMap = {
alink: "aLink",
accesskey: "accessKey",
bgcolor: "bgColor",
cellpadding: "cellPadding",
cellspacing: "cellSpacing",
"char": "ch",
charoff: "chOff",
"class": "className",
codebase: "codeBase",
codetype: "codeType",
datetime: "dateTime",
frameborder: "frameBorder",
htmlfor: "htmlFor",
ismap: "isMap",
longdesc: "longDesc",
maxlength: "maxLength",
marginheight: "marginHeight",
marginwidth: "marginWidth",
nohref: "noHref",
noresize: "noResize",
noshade: "noShade",
nowrap: "noWrap",
readonly: "readOnly",
rowspan: "rowSpan",
tabindex: "tabIndex",
usemap: "useMap",
valuetype: "valueType",
vlink: "vLink"
};

// camel-case specific attribute names
if (typeof attrMap[sAttrName] != "undefined")
{
sAttrName = attrMap[sAttrName];
}

var
hyphenatedToCamelCase = function(s)
{
return s.replace(
/-([a-z])/g,
function(match, p1, offset, input)
{
return p1.toUpperCase();
})
},

strToValue = function(s)
{
s = s.replace(/^["']|["']$/g, "");
return isNaN(s) ? s : +s;
};

// camel-case hyphenated attribute names
sAttrName = hyphenatedToCamelCase(sAttrName);

if (typeof attrValue != "undefined")
{
attrValue = strToValue(attrValue);
if (sAttrName == "style" && typeof attrValue == "string")
{
var styleProps = attrValue.split(/\s*;\s*/);
for (var j = 0, len = styleProps.length; j < len; j++)
{
var
stylePair = styleProps[j].split(/\s*:\s*/),
stylePropName = stylePair[0].toLowerCase(),
stylePropVal = stylePair[1];

dhtml.setStyleProperty(o,
hyphenatedToCamelCase(stylePropName),
strToValue(stylePropVal));
}
}
else
{
result = o[sAttrName] = attrValue;
}
}
else if (!(o[sAttrName] = true))
{
result = o[sAttrName] = sAttrName;
}
}

return result;
}
PointedEars
--
http://members.ud.com/download/gold/
http://folding.stanford.edu/
http://alien.de/seti/
http://setiathome.ssl.berkeley.edu/
May 16 '06 #22
Michael Winter wrote:
On 05/05/2006 15:02, VK wrote:
[setAttribute versus equivalent HTML short cut properties]
AFAIK they are dealing with completely different domains.
They are not.


True. The domains are not completely different. But they are
slightly different.

HTML shortcut properties are live with both writing and reading.
setAttribute() is "live" on write access; however, getAttribute()
is not "live" on read access: e.g. when the form control value is
changed as compared to the default, .value evaluates to a different
value than getAttribute("value"), and getAttribute("value") returns
the same value as .defaultValue evaluates to.
While setAttribute sets *string* values of element attribute node,
element.something = something works with the provided DOM reference.


The defined short cut properties all have types. If the right-hand
operand is not of that type, it will be coerced upon assignment.


It is implicit type conversion through a setter.
For a highly visible example, create a text input element and assign an
object reference to its value property.


See above.
PointedEars
--
Let us not judge others because of their religion, color or nationality.
We are all just human beings living together on this planet. (poehoe.de)
May 16 '06 #23

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
11913
by: Eric Chang | last post by:
I was working on this simple form with radio boxes. And when I click on one of the radio box, it tell me the value is "undefined" Why is that ? I did defined the value of each radio box: ...
6
4064
by: TheKeith | last post by:
I am doing a form for my site and would like to enable and disable a radio button set depending on whether one of the choices on an outer radio button set is checked. How can I refer to all the...
4
7278
by: Steph | last post by:
Hello, Can someone tell me the script to use for having a change on the same page when using checkbox function ? For example, i would to check one condition and display dynamically a button...
6
3257
by: Craig Keightley | last post by:
I have a page that has n number of radio groups (yes/No) how can i prevent the form being submitted if more than one radio group is not selected? By default all radio groups are unchecked ...
11
2236
by: Jon Hoowes | last post by:
Hi, I have inherited some code that has some form elements (radio buttons) that are called "1", "2" etc. for example: <input name="2" type="radio" value="45"> <input name="2" type="radio"...
21
11337
by: briggs | last post by:
<html> <head> <script> /* AddChild */ function ac() { var c; var p = document.getElementById("p"); for (var i = 0; i < 5; i++) { c = document.createElement("DIV"); // Create 'div' element.
10
1595
by: Jen | last post by:
I have a form that has two radio buttons. When the first one is clicked, I would like the page to refresh (keeping the form data in tact) and then displaying 2 new fields that need to be filled...
0
1606
by: LavanyaM | last post by:
Hi, In our app we need to create dynamic radio buttons. There should be three radio buttons and this set is dynamic accroding to the data this is my code: <th width="5%"...
2
4968
Frinavale
by: Frinavale | last post by:
I'm attempting to intercept the click event for RadioButons in an attempt to ask the user for confirmation of their action. I determined that Internet Explorer does not reset the previous...
0
7223
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
7111
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
7319
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
7485
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
5623
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
1
5042
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
3179
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
0
1542
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
1
760
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.