I'm trying to select items from a Select list and generate a Radio list.
Let's say I have these options in a list:
abc
dab
I want to print them in a radio list like this:
(radiobutton1) abc
(radiobutton2) dab
But right now I am just getting a result like this:
(radiobutton1)(radiobutton2) abc dab
Here is my code:
HTML
<radio id = MyRadio multiple></radio>
<label id = MyLabel multiple></label>
and Javascript:
function btn2Click() {
var SelectedItems = document.getElementById("MyList");
var i;
for (i = 0; i < SelectedItems.length; i++)
{
if(SelectedItems.options[i].selected)
{
var RadioSelect = document.createElement("INPUT");
RadioSelect.setAttribute("type", "radio");
var RadioText = document.createTextNode(SelectedItems.options[i].text+'\n');
RadioSelect.appendChild(RadioText);
document.getElementById("MyRadio").appendChild(RadioSelect);
document.getElementById("MyLabel").appendChild(RadioText);
}
}
}
something like this? http://jsfiddle.net/swm53ran/101/
<div class="radioButtons">
Place Radio Buttons Here
<br/>
</div>
$(document).ready(function() {
var list = ['dog', 'cat', 'fish'];
var html = "<input type='radio'/>";
for (var i = 0; i < list.length; i++) {
$('.radioButtons').append(html + list[i] + '<br/>');
}
});
Labels work with the for attribute. The for attribute needs to refer to the id of the radio input.
if(SelectedItems.options[i].selected)
{
var RadioSelect = document.createElement("INPUT");
RadioSelect.setAttribute("type", "radio");
var RadioText = document.createTextNode(SelectedItems.options[i].text+'\n');
document.getElementById("MyRadio").appendChild(RadioSelect);
document.getElementById("MyLabel").appendChild(RadioText);
}
Change the label html to:
<label id="MyLabel" for="MyRadio" multiple></label>
HTML
<div id="myRadioButtons" />
JS
var html='';
$.each(['apply', 'pear', 'peach', 'lime'], function (i, v){
html += "<input type='radio'/>" + v + '<br/>';
});
$('#myRadioButtons').append(html);
DEMO
Related
The button on click should generate radio buttons, one at a time, but I have an issue with the text node that should stick with the radio buttons. Here's part of the code:
var array = [];
items = document.getElementById("items").value.split(",");
for (var i = 0; i < items.length; i++) {
array.push(items[i]);
}
type = document.getElementById("type");
container = document.getElementById("container");
if (type.value == "radio") {
radio = document.createElement("input");
radio.setAttribute("type", "radio");
for (var i = 0; i < array.length; i++) {
text = document.createTextNode(array[0]);
container.appendChild(text);
container.appendChild(radio);
array.splice(0,1);
}
}
So this is the result, but I want the first radio button to have a value of '1', the second '2' etc.
First you don't need array the items array already contains the elements you want from text input
Also no need to slice/splice any array
Your problem was that you have to create another unique radio element for every element so what you did is appending same radio element many times which result in adding the radio button once
so you have to put
radio = document.createElement("input");
radio.setAttribute("type", "radio"); inside the for loop . . . . 😘😘
function Z() {
items = document.getElementById('items').value.split(",");
type = document.getElementById("type");
container = document.getElementById("container");
container.innerHTML = "";
if (type.value == "radio") {
for (var i = 0; i < items.length; i++) {
text = document.createTextNode(items[i]);
radio = document.createElement("input");
radio.setAttribute("type", "radio");
container.appendChild(text);
container.appendChild(radio);
}
}
}
<input onkeyup="Z()" id="items"> type:
<select id="type">
<option value="radio">Radio</option>
<option value="checkbox">Text</option>
</select>
<div id='container'></div>
Good afternoon Stackoverflow folks,
I have the following javascript code, and I want to add prior to every "member" text field a dropdown select menu defined by an array.
Both values from the select and text should be saved with the pattern select ( element : member )after in one single structured data value in mySQL.
The feature in the code of first defining the number of members should stay as it is.
I already tried with javascript to define a second document.createElementById:
var array = ["menu1","menu2","menu3"];
var selectList = document.createElement("select");
selectList.setAttribute("id", "mySelect");
but it didnt seem to work.
<html>
<head>
<script type='text/javascript'>
function addFields(){
var number = document.getElementById("member").value;
var container = document.getElementById("container");
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
container.appendChild(document.createTextNode("Member " + (i+1)));
var input = document.createElement("input");
input.type = "text";
input.name = "member" + i;
container.appendChild(input);
container.appendChild(document.createElement("br"));
}
}
</script>
<body>
<input type="text" id="member" name="member" value="">Number of members: (max. 10)<br/>
FillDetails
<div id="container"/>
</body>
</head>
</html>
The code can tested hier http://jsfiddle.net/t656N/1/
The result i am willing to achieve is something like this: https://imgur.com/a/RDMjNkx
Got it working using a second for and a createElement as shown below:
<script type='text/javascript'>
function addFields() {
var number = document.getElementById("member").value;
var container = document.getElementById("container");
var optionsSelect = [
{
id: 1,
title: 'Option 1'
},
{
id: 2,
title: 'Option 2'
},
{
id: 3,
title: 'Option 3'
}
];
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i = 0; i < number; i++) {
var select = document.createElement('select');
for (var j = 0; j < optionsSelect.length; j++) {
var options = document.createElement("option");
options.value = optionsSelect[j].id;
options.text = optionsSelect[j].title;
select.appendChild(options);
}
container.appendChild(select);
container.appendChild(document.createTextNode(" -> Description " + (i + 1) + " "));
var input = document.createElement("input");
input.type = "text";
container.appendChild(input);
container.appendChild(document.createElement("br"));
}
}
</script>
I have created a JS quiz and it holds all the answer choices in arrays. The answer choices are then inserted into a created <input type="radio" . . . . /> element. However the choices, instead of being inside a label, they are held inside the input element alone. Here's to further expand what I'm talking about:
I want it to be like this
Here's the code that creates the inputs:
// Creates a list of the answer choices as radio inputs
function createRadios(index) {
var radioList = $('<ul>');
var item;
var input = '';
for (var i = 0; i < questions[index].choices.length; i++) {
item = $('<li>');
input = '<input type="radio" name="answer" value=' + i + ' />';
input += questions[index].choices[i];
item.append(input);
radioList.append(item);
}
return radioList;
}
Any help would be greatly appreciated.
The label should really encompass the radio button for best practices. Try this:
// Creates a list of the answer choices as radio inputs
function createRadios(index) {
var radioList = $('<ul>');
for (var i = 0; i < questions[index].choices.length; i++) {
var item = $('<li>');
var label = $('<label>');
var input = $('<input>', {type: 'radio', name: 'answer', value: i});
input.appendTo(label);
label.append(questions[index].choices[i]);
item.append(label);
radioList.append(item);
}
return radioList;
}
Please see the fiddle link at the bottom. I have two questions:
How to add HTML text to these radio buttons. I have to give them $ and % value (for the user).
Find the values of every radio button selected. For example, the user added 10 rows (each having 2 radio buttons). I have iterated a loop to find the input type and see if the button is checked and then find its value.
NOT WORKING, guide me what wrong am I doing.
FIDDLE
var i=0;
window.myAdd = function(){
var x = i;
var butts = document.createElement("INPUT");
butts.setAttribute("type", "radio");
butts.setAttribute("name", "currency"+x);
butts.setAttribute("value", "%");
butts.setAttribute("id", "radio"+i);
//var node = document.createTextNode("%");
//butts.appendChild(node);
i=i+1;
//console.log(butts);
var butts_1 = document.createElement("INPUT");
butts_1.setAttribute("type", "radio");
butts_1.setAttribute("name", "currency"+x);
butts_1.setAttribute("value", "$");
butts_1.setAttribute("id", "radio"+i);
i=i+1;
//console.log(butts_1);
var row = document.createElement("TR");
//document.getElementById('tab').appendChild(butts);
//document.getElementById('tab').appendChild(butts_1);
row.appendChild(butts);
row.appendChild(butts_1);
document.getElementById('tab').appendChild(row);
x=x+1;
}
window.myfunction = function(table){
//var x = String(document.getElementById('radioP').value);
//alert(x);
for(var i=0;i<table.elements.length;i++){
if(table.elements[i].type =='radio'){
if(table.elements[i].checked == true){
alert(table.elements[i].value);
}
}
}
}
I have corrected your script to work:
var i = 0;
window.myAdd = function() {
var x = i;
var butts = document.createElement("INPUT");
butts.setAttribute("type", "radio");
butts.setAttribute("name", "currency" + x);
butts.setAttribute("value", "%");
butts.setAttribute("id", "radio" + i);
//var node = document.createTextNode("%");
//butts.appendChild(node);
i = i + 1;
//console.log(butts);
var butts_1 = document.createElement("INPUT");
butts_1.setAttribute("type", "radio");
butts_1.setAttribute("name", "currency" + x);
butts_1.setAttribute("value", "$");
butts_1.setAttribute("id", "radio" + i);
i = i + 1;
//console.log(butts_1);
var row = document.createElement("TR");
//document.getElementById('tab').appendChild(butts);
//document.getElementById('tab').appendChild(butts_1);
row.appendChild(butts);
row.appendChild(butts_1);
document.getElementById('mytable').appendChild(row);
x = x + 1;
}
window.myfunction = function(table) {
//var x = String(document.getElementById('radioP').value);
//alert(x);
//debugger;
for (var i = 0; i < table.rows.length; i++) {
var row = table.rows[i];
for (var j = 0; j < row.childNodes.length; j++) {
if (row.childNodes[j].type == 'radio') {
if (row.childNodes[j].checked == true) {
alert(row.childNodes[j].value);
}
}
}
}
}
<button onclick='myAdd()'>Add Radio Buttons</button>
<table id="mytable" name="mytable"></table>
<button onclick='myfunction(document.getElementById("mytable"))'>GET VALUE</button>
1) You have to use <label> element, e.g.:
<input id="radio_1" type="radio" value="1" />
<label for="radio_1">$</label>
<input id="radio_2" type="radio" value="2" />
<label for="radio_2">%</label>
2) You have to iterate through them. Considering all of the radios are within some div with class "container", you'll need something like this:
document.getElementById('get_values').addEventListener('click', function() {
var radios = document.querySelectorAll('.container input[type="radio"]');
values = {};
for(i=0; i<radios.length; i++) {
var radio = radios[i];
var name = radio.getAttribute('name');
if(radio.checked) {
values[name] = radio.value;
} else {
values[name] = values[name] || null;
}
}
alert(JSON.stringify(values));
});
See this fiddle: http://jsfiddle.net/andunai/gx6quyo0/
Hi
I am creating dynamic div elements , let say 4 div are there . div1,div2,div3,div4. each div has set of radio buttons rad1,rad2,rad3,rad4 . see as follows.
div1 ->rad1,rad2,rad3,rad4 groupName=rd1 ->end div1
div2 ->rad1,rad2,rad3,rad4 groupName=rd2 ->end div2
div3 ->rad1,rad2,rad3,rad4 groupName=rd3 ->end div3
div4 ->rad1,rad2,rad3,rad4 groupName=rd4 ->end div4
This is dynamically created html. i want to get which Radio selected from div2 or div3 what script i have to write ?
DEMO: http://so.lucafilosofi.com/get-html-element-inside-another-element-in-javascript
function checkRadio() {
var radios = document.getElementById('rBox').getElementsByTagName('input');
for (var i = 0; i < radios.length; i++) {
radios[i].onclick = function(e) {
var pid = this.parentNode.id;
if ( pid == 'group-2' || pid == 'group-3' )
alert('PARENT: ' + this.parentNode.id )
}
}
}
<body onload="checkRadio()">
<div id="rBox">
<div class="rad" id="group-1">
<input type="radio" name="option" />
....
</div>
<div class="rad" id="group-2">
<input type="radio" name="option" />
....
</div>
....
</div>
</body>
use jquery
use jquery-> $.live()
If I understood you right, this may help you:
var num_of_options = 4;
var selected = new Array();
var op, i, j;
for (j=1;j<=num_of_options;j++) {
op = document.getElementsByName("rd"+j);
for (i in op) {
if (op[i].checked) {
selected[j] = op[i].value;
}
}
}
selected will contain the selected values for the radio groups in each divs.
Here is crude sample code that will show the selected value in each div:
var arrDivs = ["div1", "div2", "div3"];
for (var i = 0; i < arrDivs.length; i++) {
var oDiv = document.getElementById(arrDivs[i]);
if (oDiv) {
var arrInputs = oDiv.getElementsByTagName("input");
var blnFound = false;
for (var j = 0; j < arrInputs.length; j++) {
var oInput = arrInputs[j];
if (oInput.type == "radio" && oInput.checked) {
alert("The value of selected radio in div '" + arrDivs[i] + "' is: " + oInput.value);
blnFound = true;
break;
}
}
if (!blnFound)
alert("div '" + arrDivs[i] + "' contains no selected radio button");
}
else {
alert("div was not found: " + arrDivs[i]);
}
}