• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

radio button using javascript DOM

 
Li Jenny
Ranch Hand
Posts: 57
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
how can i create two radio button in a row using DOM javascript
 
kv ruby
Ranch Hand
Posts: 38
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Li Jenny wrote:how can i create two radio button in a row using DOM javascript


Hi Li,

is this what you are lookin for?

<tr>
<td><input type="radio"></td>
<td><input type="radio"></td>
</tr>
 
Anoop Pillai
Greenhorn
Posts: 9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Li,

Try the below javascript code.


 
Li Jenny
Ranch Hand
Posts: 57
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
thanks for your help.


but when i check another radiobutton, it seems can't appear checked.
the checked always appear in the first radio button. can't choose second one.
why?
 
Anoop Pillai
Greenhorn
Posts: 9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Li Jenny wrote:thanks for your help.


but when i check another radiobutton, it seems can't appear checked.
the checked always appear in the first radio button. can't choose second one.
why?



In the code the first radio button was checked using:


Similarly for checking the second radio button you would have to put:


Also you would have to remove the check code from the first radio button otherwise both the radio buttons will be checked by default.
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Some elements have a problem with createElement and setting the name.

This code here [view source] solves the browser quirk: http://www.pascarello.com/examples/createElement.html

Eric
 
Li Jenny
Ranch Hand
Posts: 57
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I know the defaultchecked is when i enter the page, the radiobutton is checked by default.
but the radio button can't let the user choose either of them.
when the user click on 1st radio button, then checked this button, and set the 2nd radio button checked to false.
if 2nd button is checked, then set the first button checked to false.
only one of them checked.

but now when i code rad1.defaultchecked=true, it is always true, even i click another button, it can't change the checked value to the button clicked.
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Show us your broken code.

Eric
 
Li Jenny
Ranch Hand
Posts: 57
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
i just copied from the 2nd post's code as the code defaultchecked is set to rad1.
i can't select rad2 or rad1, as it is always checked at rad1.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64617
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Eric Pascarello wrote:Show us your broken code.

Eric
 
Li Jenny
Ranch Hand
Posts: 57
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator


i just copied this code but when i click on the rad2,it can't checked.
 
Anoop Pillai
Greenhorn
Posts: 9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Can you copy the code into a separate HTML file and see whether its working, may be the file in which you are including this code have other javascript errors and because of this the radio button code is not executing properly. So just trying copying this into a separate HTML file and see whether it works.

This code works fine with me; I have tested it on Mozilla Firefox 3.6.3 and Internet Explorer 8

Can you let us know which browser(along with version) are you testing it on?
 
Li Jenny
Ranch Hand
Posts: 57
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
IE 7
 
Anoop Pillai
Greenhorn
Posts: 9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Li,

This is a bug in IE7. Basically in IE7 the browser doesn't generate the name attribute for radio button when its created dynamically.
To check that, just open the HTML file in your IE7 browser and after the file is loaded just type in address bar(in one line):
javascript:alert(document.getElementById('radioDiv').innerHTML);

Now you can observe in the alert that the radio input element doesn't have the name attribute; so its not behaving properly.

I suggest if you want to create radio buttons dynamically either go by Eric's suggestion:

This code here [view source] solves the browser quirk: http://www.pascarello.com/examples/createElement.html


Or you can simply use innerHTML, for ex:


 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic