Forum:

HTML Pages with CSS and JavaScript

radio button using javascript DOM

Li Jenny

Ranch Hand

Posts: 57

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

how can i create two radio button in a row using DOM javascript

kv ruby

Ranch Hand

Posts: 38

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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>

Regards, ruby kv
rubyshiv.blogspot.com

Anoop Pillai

Greenhorn

Posts: 9

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi Li,

Try the below javascript code.

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function createRadio(){
		var objDiv = document.getElementById("radioDiv");
		
		var radioItem1 = document.createElement("input");
		radioItem1.type = "radio";
		radioItem1.name = "radioGrp";
		radioItem1.id = "rad1";
		radioItem1.value = "myradio1";

radioItem1.defaultChecked = true; 
		radioItem1.checked = true;

var radioItem2 = document.createElement("input");
		radioItem2.type = "radio";
		radioItem2.name = "radioGrp";
		radioItem2.id = "rad2";
		radioItem2.value = "myradio2";

var objTextNode1 = document.createTextNode("Radio1");
		var objTextNode2 = document.createTextNode("Radio2");

var objLabel = document.createElement("label");
		objLabel.htmlFor = radioItem1.id;
		objLabel.appendChild(radioItem1);
		objLabel.appendChild(objTextNode1);

var objLabel2 = document.createElement("label");
		objLabel2.htmlFor = radioItem2.id;
		objLabel2.appendChild(radioItem2);
		objLabel2.appendChild(objTextNode2);

objDiv.appendChild(objLabel);
		objDiv.appendChild(objLabel2);

}
//-->
</SCRIPT>
</HEAD>

The Next Best Thing To Knowing Something Is Knowing Where To Find It.

Li Jenny

Ranch Hand

Posts: 57

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

The Next Best Thing To Knowing Something Is Knowing Where To Find It.

Eric Pascarello

author

Posts: 15385

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Posts: 15385

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Show us your broken code.

Eric

Li Jenny

Ranch Hand

Posts: 57

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Sheriff

Posts: 67750

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Eric Pascarello wrote:Show us your broken code.

Eric

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Li Jenny

Ranch Hand

Posts: 57

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

function createRadio(){   
        var objDiv = document.getElementById("radioDiv");   
           
        var radioItem1 = document.createElement("input");   
        radioItem1.type = "radio";   
        radioItem1.name = "radioGrp";   
        radioItem1.id = "rad1";   
        radioItem1.value = "myradio1";   
  
        radioItem1.defaultChecked = true;    
       // radioItem1.checked = true;   
  
        var radioItem2 = document.createElement("input");   
        radioItem2.type = "radio";   
        radioItem2.name = "radioGrp";   
        radioItem2.id = "rad2";   
        radioItem2.value = "myradio2";   
  
        var objTextNode1 = document.createTextNode("AA");   
        var objTextNode2 = document.createTextNode("BB");   
  
        var objLabel = document.createElement("label");   
        objLabel.htmlFor = radioItem1.id;   
        objLabel.appendChild(radioItem1);   
        objLabel.appendChild(objTextNode1);   
  
        var objLabel2 = document.createElement("label");   
        objLabel2.htmlFor = radioItem2.id;   
        objLabel2.appendChild(radioItem2);   
        objLabel2.appendChild(objTextNode2);   
           
  
        objDiv.appendChild(objLabel);   
        objDiv.appendChild(objLabel2);   
    
}

i just copied this code but when i click on the rad2,it can't checked.

Anoop Pillai

Greenhorn

Posts: 9

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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?

The Next Best Thing To Knowing Something Is Knowing Where To Find It.

Li Jenny

Ranch Hand

Posts: 57

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

IE 7

Anoop Pillai

Greenhorn

Posts: 9

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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:

The Next Best Thing To Knowing Something Is Knowing Where To Find It.

Aaaaaand ... we're on the march. Stylin. Get with it tiny ad.

We need your help - Coderanch server fundraiser

https://coderanch.com/wiki/782867/Coderanch-server-fundraiser