CODEWITHSUNDEEP
javascripthtmldynamicradio-button
Translator Translator
Translator Translator

Reputation: 29

Dynamic creation of radio button in Html for IE

Can anybody give me a working code for creating dynamic radio buttons in html (and javascript) which works in IE, Firefox and Chrome?

I saw a lot of codes in the internet, but none of them worked for me.

I also need them to have a label. And I don't want to use Jquery.

Tried this code:

function test() {
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute('type', 'radio');
element.setAttribute('value', 'source');
element.setAttribute('name', 'source'); 
element.setAttribute('id', 'source_id');
var foo = document.getElementById("divTxt");
foo.appendChild(element);
var newlabel2 = document.createElement("Label"); 
newlabel2.for = "source_id";
newlabel2.innerHTML = "first name ";
foo.appendChild(newlabel2);
}

Upvotes: 1

Views: 5509

Answers (2)

karaxuna
karaxuna

Reputation: 26940

var radio1 = document.createElement('input');
radio1.id = 'myRadioId1';
radio1.type = 'radio';
radio1.name = 'radioGroup';
radio1.value = 'someValue1';

var radio2 = document.createElement('input');
radio2.id = 'myRadioId2';
radio2.type = 'radio';
radio2.name = 'radioGroup';
radio2.value = 'someValue2';

var label1 = document.createElement('label');
label1.htmlFor = radio1.id;
label1.innerHTML = 'label for radio1';

var label2 = document.createElement('label');
label2.htmlFor = radio2.id;
label2.innerHTML = 'label for radio2';

Appending to container:

var container = document.getElementById('mydivid');
container.appendChild(radio1);
container.appendChild(label1);
container.appendChild(radio2);
container.appendChild(label2);

If you need radio group, you should give them same names. Here is fiddle

Upvotes: 3

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

The main problem with the code (which you posted in a comment and I copied into the question) is that it contains only a function definition. The function is not called at all, so need to have a statement like test(). Moreover, the function postulates that there is an element with id=divTxt on the page, and that element must appear before the calling the function. The following code successfully creates a radio button element and its label and inserts them into an existing element on the page:

<!DOCTYPE html>
<title>Demo</title>
<div id=divTxt></div>
<script>
function test() {
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute('type', 'radio');
element.setAttribute('value', 'source');
element.setAttribute('name', 'source'); 
element.setAttribute('id', 'source_id');
var foo = document.getElementById("divTxt");
foo.appendChild(element);
var newlabel2 = document.createElement("Label"); 
newlabel2.setAttribute('for', "source_id");
newlabel2.innerHTML = "first name ";
foo.appendChild(newlabel2);
}
test();
</script>

(You cannot use the for property in JavaScript; the property name is htmlFor, but it is probably simpler to set the for attribute as above.)

However, radio buttons should always appear in groups, due to their nature, so you should use a function with some arguments to generate a set of radio buttons according to a common pattern. Like this:

<!DOCTYPE html>
<title>Demo</title>
<div id=divTxt></div>
<script>
function radio(name, value, text) {
var element = document.createElement("input");
var id = name + value;
element.setAttribute('type', 'radio');
element.setAttribute('value', value);
element.setAttribute('name', name); 
element.setAttribute('id', id);
var foo = document.getElementById("divTxt");
foo.appendChild(element);
var newlabel2 = document.createElement("label"); 
newlabel2.setAttribute('for', id);
newlabel2.innerHTML = text;
foo.appendChild(newlabel2);
}
radio('sex', '0', 'male');
radio('sex', '1', 'female');
</script>

You should minimally enhance this by adding code that adds line breaks between the items, or preferably put each pair of a button and its label inside a div elemebt.

Upvotes: 2

Related Questions