473,320 Members | 1,965 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Radio button question (I'm sure has been answered but I don't know what to search on)

Is it not possible, in IE, to dynamically click a radio button? I'm
grabbing some values from a database and using them to populate radio
buttons on a page. I have alternate code for Firefox browsers using the
setAttribute() function.

Everything works as planned in Firefox but in IE, the buttons won't
populate and, what's worse, I can't even click on them after everything
loads. I see the slight shadow that indicates you're clicking on a
radio button, but the black dot doesn't appear inside any of the radio
buttons when I click on them.

:-(
obj4 = document.createElement("input");
obj4.name = "test";
obj4.type = "radio";
obj4.value = 1;
if (i == 1) { obj4.checked = true; obj4.click(); }

obj5 = document.createElement("input");
obj5.name = "test";
obj5.type = "radio";
obj5.value = 2;
if (i == 2) { obj5.checked = true; obj5.click(); }

obj6 = document.createElement("input");
obj6.name = "test";
obj6.type = "radio";
obj6.value = 3;
if (i == 3) { obj6.checked = true; obj6.click(); }

May 1 '06 #1
7 2503
Nathaniel K. write:
Is it not possible, in IE, to dynamically click a radio button? I'm
grabbing some values from a database and using them to populate radio
buttons on a page.


IE has a quirk -- it doesn't let you add the name attribute after
you've created the element. For IE, you need to assign the name like
this:

var newInp = document.createElement("<input type='radio' name='test'
value='4'>");

You can either set the new radio button's "selected" attribute inside
the createElement itself, or, in code:

newInp.click();

Stan Scott
New York City

May 1 '06 #2
st*****@gmail.com said on 02/05/2006 9:18 AM AEST:
Nathaniel K. write:
Is it not possible, in IE, to dynamically click a radio button? I'm
grabbing some values from a database and using them to populate radio
buttons on a page.

IE has a quirk -- it doesn't let you add the name attribute after
you've created the element. For IE, you need to assign the name like
this:


As was pointed out in a recent thread, IE does add the name attribute to
input elements created using createElement, however IE won't allow you
to use the name attribute to get a reference to the element. You also
can't see the name attribute in the element's innerHTML, and once the
script ends you can't access the name attribute of the element (e.g.
alert(inputRef.name) shows an empty string).

<URL:http://groups.google.co.uk/group/comp.lang.javascript/browse_frm/thread/f5213cbae40229cf/552cbda3521fab6e?q=IE+name+dynamic+element&rnum=2# 552cbda3521fab6e>

If you create the element and add a name property, then submit the form,
you'll see the added element and it's name in the data, so the name is
added.

var newInp = document.createElement("<input type='radio' name='test'
value='4'>");


That is an IE-ism that probably only works in IE. If the OP really
needs to get a reference to the element using its name, the easiest way
is to also add an ID and use that instead.
--
Rob
Group FAQ: <URL:http://www.jibbering.com/FAQ>
May 1 '06 #3
na*************@gmail.com said on 02/05/2006 4:54 AM AEST:
Is it not possible, in IE, to dynamically click a radio button? I'm
No, it is possible but IE has trouble using the name attribute with
dynamically added elements. It also has problems with letting you check
dynamically added radios, etc.

grabbing some values from a database and using them to populate radio
buttons on a page. I have alternate code for Firefox browsers using the
setAttribute() function.

Everything works as planned in Firefox but in IE, the buttons won't
populate and, what's worse, I can't even click on them after everything
loads. I see the slight shadow that indicates you're clicking on a
radio button, but the black dot doesn't appear inside any of the radio
buttons when I click on them.


Add the name attribute anyway (it is actually added, just that accessing
it is buggy in IE). You can add elements using IE's special method, but
it will barf in (all?) other browsers.

The following example uses either the standard DOM method or IE's
special method if needed. It's a bit of a kludge and relies on
try..catch, anyone with a better method is welcome to chip in:
<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
Group FAQ: <URL:http://www.jibbering.com/FAQ>
May 2 '06 #4
> "RobG" <rg***@iinet.net.au> wrote:
news:1y*******************@news.optus.net.au....

[snip]
anyone with a better method is welcome to chip in:

Better? Not sure if its better, but how about using a conditional
compilation statement.

http://msdn2.microsoft.com/en-us/lib...fs(VS.80).aspx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
label{cursor:pointer;}
</style>
<script type="text/javascript">
function addRadios(form, grpName, num){
var oRadio, e, lab;
for (var i=0; i<num; ++i){
/*@cc_on
@if (!@oRadio)
oRadio = document.createElement('<input name="'+grpName+'">');
@else @*/
oRadio = document.createElement('input');
oRadio.name = grpName;
form.appendChild(oRadio);
/*@end @*/
oRadio.type = 'radio';
oRadio.onclick = rbClicked;
oRadio.value = grpName + ' ' + i;
form.appendChild(oRadio);
lab=document.createElement('label');
lab.htmlFor=oRadio.id=oRadio+i;
lab.appendChild(document.createTextNode('rad-' + i));
form.appendChild(lab);
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>
<title></title>
</head>
<body>
<form action="#" name="aFrom" id="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>
</body>
</html>

--
BootNic Tuesday, May 02, 2006 9:10 AM

People grow through experience if they meet life honestly and
courageously. This is how character is built.
*Eleanor Roosevelt*
May 2 '06 #5
> "BootNic" <Bo*****@bounce.prodigy.net> wrote:
news:3T*****************@newssvr24.news.prodigy.ne t.... [snip] /*@cc_on
@if (!@oRadio)
oRadio = document.createElement('<input name="'+grpName+'">');
@else @*/
oRadio = document.createElement('input');
oRadio.name = grpName;
form.appendChild(oRadio);

^ that append should be removed.
[snip]

--
BootNic Tuesday, May 02, 2006 9:18 AM

I try to take one day at a time, but sometimes several days attack me
at once.
*Jennifer Unlimited*

May 2 '06 #6
> "BootNic" <Bo*****@bounce.prodigy.net> wrote:
news:3T*****************@newssvr24.news.prodigy.ne t.... [snip] lab.htmlFor=oRadio.id=oRadio+i;

lab.htmlFor=oRadio.id=oRadio.name+i;

Perhaps I should have just left the suggestion and a link without an
example.

--
BootNic Tuesday, May 02, 2006 9:37 AM

If you can learn from hard knocks, you can also learn from soft
touches.
*Carolyn Kenmore*

May 2 '06 #7
na*************@gmail.com wrote :

na******@yahoo.com

You multi-posted !! You were answered in the other comp.lang. group.

"What would cause radio buttons to not be clickable?"
comp.infosystems.www.authoring.html

Gérard
--
remove blah to email me
May 5 '06 #8

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

Similar topics

1
by: Brian | last post by:
Hello all... I have a page that will be performing a search. The search consists of 3 radio button options. The first 2 will search the entire web through google and the site as indexed by...
2
by: jimi_xyz | last post by:
I am creating a search engine and here is what i have so far.. <form class="complex-form" name="searchForm" method="post" action="Directory.asp"> <TABLE border="1" cellspacing="2"...
2
by: jimi_xyz | last post by:
Sorry if this isn't the correct group, i don't think there is a group for straight HTML. I am trying to create a type of search engine. There are two radio buttons at the top, in the middle there...
33
by: Brian | last post by:
I have a list of plain HTML radio buttons that I want to be able to loop through, get the values from them and insert them into a db. each one should be a separate record... Can anyone please give...
1
by: Jerry | last post by:
We have a 10-question quiz for kids, each question being a yes or no answer using radio selections. I'd like to keep a current total of yes's and no's at the bottom of the quiz (if the user selects...
5
by: Fran Jakers | last post by:
Hello all, I'm new to all this and I could really use some help. I've searched the web but cannot find an answer. I have an HTML form with 3 radio buttons and a search field that calls a...
14
by: jahphill | last post by:
Hey. Im new here and a total newb at scriping =D Right this is what im trying to do. I want to make a radio button connected to a text box. Say the button 'define' has been clicked, and in...
3
by: jahphill | last post by:
Hey. I thought id make a seperate discusion because the other became a bit lengthy and confusing. Aim: Create a php file which works with the script below, which makes the radiobuttons work =D...
11
by: Twayne | last post by:
Hi, Newbie to PHP here, no C or other relevant background, so pretty niave w/r to the nuances etc. but I think this is pretty basic. XP Pro, SP2+, PHP 4.4.7, XAMPP Local Apache Server...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 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 former...

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.