CODEWITHSUNDEEP
javascripthtml
Knight Rider
Knight Rider

Reputation: 188

Value of Radio buttons using Loop and add HTML text to it

Please see the fiddle link at the bottom. I have two questions:

  1. How to add HTML text to these radio buttons. I have to give them $ and % value (for the user).
  2. 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);
        }
    }
 }
}

Upvotes: 0

Views: 1805

Answers (2)

invernomuto
invernomuto

Reputation: 10221

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>

Upvotes: 1

Andrew Dunai
Andrew Dunai

Reputation: 3129

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/

Upvotes: 0

Related Questions