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

Question

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.

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);
        }
    }
 }
}

Are you just trying to label the inputs and check their values? — apaul
– apaul, Commented Dec 3, 2014 at 18:12
No, I want to label them then the user can select as many checkboxes then by clicking on GET VALUE it must show all checked values. — Knight Rider
– Knight Rider, Commented Dec 3, 2014 at 18:13

invernomuto · Accepted Answer · 2014-12-03 18:24:52Z

1

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>

answered Dec 3, 2014 at 18:24

invernomuto

10.3k5 gold badges42 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Knight Rider Over a year ago

Thanks for putting light on the table.rows.length and row.childNodes.length....but it is not working..Uncaught TypeError: Cannot read property 'rows' of undefined

invernomuto Over a year ago

I've changed the selectors in the markup, try to run my snippet, just click on button "Run code snippet"

Andrew Dunai · Accepted Answer · 2014-12-03 18:24:38Z

0

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/

answered Dec 3, 2014 at 18:24

Andrew Dunai

3,11921 silver badges27 bronze badges

1 Comment

Knight Rider Over a year ago

Hi, totally ignored the querySelectorAll() thing..Thanks for that!

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related