In HTML, with Javascript, create new radio button and its text?
Something like this works to create a button and label.
<div id="radio_home"></div>
<script>
var radio_home = document.getElementById("radio_home");
function makeRadioButton(name, value, text) {
var label = document.createElement("label");
var radio = document.createElement("input");
radio.type = "radio";
radio.name = name;
radio.value = value;
label.appendChild(radio);
label.appendChild(document.createTextNode(text));
return label;
}
var yes_button = makeRadioButton("yesbutton", "yes", "Oh yea! do it!");
radio_home.appendChild(yes_button);
</script>
GBC
Building web apps for a project about content curation. It's just the beginning...
Updated on May 03, 2020Comments
-
GBC about 4 years
I want that when the "Yes" radio button of a form (form1) is checked, a new form (form2) appears, with two radio buttons and their text "Yes" and "No". With an event "onclick" in the "Yes" button of the form1, I manage to make the new form appear, with the two radio buttons, but I cannot make their text appear. Since radio buttons do not have "innerHTML", I try to add the text either as plain text, either as "label", but it is not working. Is it a problem in the syntax or in the logic (not possible to create text at the same time as the button)? Thank you for your help.
In my HTML body I have this:
<form id="form1"> <input type="radio" id= "form1_no" value="no" checked> <label for = "form1_no" >No</label> <input type="radio" id= "form1_yes" value="yes" onClick= exam()> <label for = "form2_yes" >Yes</label> </form>
The function exam() is:
<script type='application/javascript'> function exam() { var inputno = document.createElement("input"); inputno.type = "radio"; inputno.id = "form2_no"; inputno.value = "no"; inputno.onclick = function () {alert("I select No in Form 2")}; document.getElementById("form2").appendChild(inputno); // this is working var inputyes = document.createElement("input"); inputyes.type = "radio"; inputyes.id = "form2_yes"; inputyes.value ="yes"; inputyes.onclick = function () {alert("I select Yes in Form 2")}; document.getElementById("form2").appendChild(inputyes); // this is working // now, the code that is not working: // 1st tentative (adding "Yes" and "No" as plain text after their radio button): var textno = "No"; document.getElementById("form2_no").appendChild(textno); var textyes = "Yes"; document.getElementById("form2_yes").appendChild(textyes); // 2nd tentative (adding "Yes" and "No" as labels to their radio button): var labelno = document.createElement("label"); labelno.for="form2_no"; labelno.innerHTML = "No"; document.getElementById("form2_no").appendChild(labelno); var labelyes = document.createElement("label"); labelyes.for="form2_yes"; labelyes.innerHTML = "Yes"; document.getElementById("form2_yes").appendChild(labelyes); } </script>
-
GBC about 10 yearsThank you. But doing this, I have a problem. If, on the 1st form, I then change my mind, check the "No" button, and the change my mind again and check the "Yes" button, two new buttons will be created in the 2nd form, that is the 2nd form will now have 2 "Yes" buttons and 2 "No" buttons...
-
Jeremy J Starcher about 10 yearsThen you are adding buttons to the wrong form at the wrong time. This is a new question and you'll have to post the relevant code.
-
GBC about 10 yearsIt's OK, I solved this pb. By adding a variable
id
to themakeRadioButton
function, addingradio.id = id
in it, and codingvar exist = document.getElementById(id); if (exist === null) {
before and}
after the content of themakeRadioButton
function that you had proposed.