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);
}
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);
}
- What have you actually tried? Show some of the simple alternatives you have found and explain in which sense it does not work. – Jukka K. Korpela Commented Apr 24, 2013 at 6:28
- @JukkaK.Korpela, I tried this code: – Translator Translator Commented Apr 24, 2013 at 6:59
- 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); } – Translator Translator Commented Apr 24, 2013 at 6:59
- please somebody tell me how to put code here! – Translator Translator Commented Apr 24, 2013 at 6:59
- Theh code I sent, does not work in IE at all, it shows neither the button nor the label – Translator Translator Commented Apr 24, 2013 at 7:02
2 Answers
Reset to default 3var 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
The main problem with the code (which you posted in a ment 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 mon 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.