How to get if a radio button generated dynamically is checked or not using javascript?

Question

I have a set of dynamically generated radio buttons against each data of the list but I am not able to get the checked radio button value. Please help!!

function displayList()
{
 var arr=["Apple", "Banana", "Grapes"];
 var list
 var output="";
 var output2="";
 var output3="";
 var output4="";
 for(var i=0; i<arr.length; i++)
 {
  list=arr[i];
 
  output+= '<input type="checkbox" value='+list+' name="box2">'  + '   ' + list+'   '+'<br><br>'; 
  
  
  output2+= 'yes:<input type="radio" value="yes" name="box2'+i+'">'+'no:<input type="radio" value="yes" name="box2'+i+'">'+'<br><br>';
  output3+= '<button type="button" id="myBtn" onclick="displayCardList()" >Add Prompt</button>'+'<br><br>';
  //onclick="myfunction()"
  output4+= '<button type="button" id="mySaveBtn" onclick="addEntity()" >Save </button>'+'<br><br>';
  document.getElementById("List").innerHTML=output;
  document.getElementById("radioBtn").innerHTML=output2;
  document.getElementById("myBtn").innerHTML=output3;
  
 }
}

<html>
<body onload="displayList()">

    <div class="row">
  <div class="col-sm-4"><div  style="font-size:16px" id="List"> </div></div>
  <div class="col-sm-4"><div style="font-size:16px" id="radioBtn"></div></div>
  <div class="col-sm-4"><div id="myBtn"></div></div>
  
</div>
</body>
</html>

@SarathKumar: There is no `jquery` tag on this question, nor any use of jQuery within it. — T.J. Crowder, Apr 10 '17 at 15:20
You do it exactly the way you do it if you don't add the button dynamically. Just be sure you do that *after* your `ocument.getElementById("radioBtn").innerHTML=output2;` line (presumably you'll be waiting for the user to do something first anyway). — T.J. Crowder, Apr 10 '17 at 15:23

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

But first, let me separate content

I recommend using template tag to separate JavaScript from HTML, as you should always do.

You can then insert as many items using that template, as you wish. As you can see below it's quite tedious using pure JavaScript. I'd recommend using Handlebars.

var getRadioValue = function(name) {
  var radios = document.getElementsByName(name);

  for (var i = 0, length = radios.length; i < length; ++i) {
      if (radios[i].checked) {
        return radios[i].value
      }
  }
  
  return null;
};

var Actions = {
  addPrompt: function(i) {
    var value = getRadioValue('fruit-fresh-' + i);
    if (value == "no") {
      prompt('Why is ' + fruits[i] + ' not fresh? Explain:');
    }
    else if (value == "yes") {
      alert('We are glad that ' + fruits[i] + ' is fresh! Good job!');
    }
    else {
      alert('Please, check the corresponding value for ' + fruits[i] + ' freshness!');
    }
  },
  save: function(i) {
    alert('Saving: ' + fruits[i]);
  },
  generateMarkupForFruit: function(i, fruitName) {
    var template = document.querySelector('#fruits-template');
    var row = document.importNode(template.content, true);

    var fruitId = 'fruit-' + i,
        fruitField = row.querySelector('.fruit'),
        fruitLabel = row.querySelector('.fruit-label');

    fruitField.value = fruitName;
    fruitField.setAttribute('id', fruitId);

    fruitLabel.textContent = fruitName;
    fruitLabel.setAttribute('for', fruitId);

    var yesId = 'fruit-yes-' + i,
        noId = 'fruit-no-' + i,
        groupId = 'fruit-fresh-' + i,
        yesField = row.querySelector('.yes'),
        yesLabel = row.querySelector('.yes-label'),
        noField = row.querySelector('.no'),
        noLabel = row.querySelector('.no-label');

    yesField.setAttribute('name', groupId);
    yesField.setAttribute('id', yesId);
    yesLabel.setAttribute('for', yesId);
    noField.setAttribute('name', groupId);
    noField.setAttribute('id', noId);
    noLabel.setAttribute('for', noId);

    var addPromptBtn = row.querySelector('.add-prompt-btn'),
        saveBtn = row.querySelector('.save-btn');

    addPromptBtn.addEventListener('click', Actions.addPrompt.bind(null, i));
    saveBtn.addEventListener('click', Actions.save.bind(null, i));
    
    return row;
  }
};

var fruits = ["Apple", "Banana", "Grapes"];
var table = document.querySelector('#fruits');
for (var i = 0; i < fruits.length; ++i)
{
  var row = Actions.generateMarkupForFruit(i, fruits[i]);
  table.appendChild(row);
}

#fruits {
  width: 100%;
  border-collapse: collapse;
}

#fruits td,
#fruits th {
  border: solid 1px;
  padding: 0.25em;
}

#fruits th {
  color: #fff;
  background: #000;
}

#fruits .actions {
  text-align: center;
}

#fruits .actions .save-btn {
  font-weight: bold;
}

<table id="fruits">
  <tr>
    <th>Fruit</th>
    <th>Is fruit fresh?</th>
    <th>Actions</th>
  </tr>
</table>

<template id="fruits-template">
  <tr>
    <td>
      <input type="checkbox" class="fruit">
      <label class="fruit-label"></label>
    </td>
    <td>
      <input type="radio" class="yes" value="yes">
      <label class="yes-label">Yes</label>
      <input type="radio" class="no" value="no">
      <label class="no-label">No</label>
    </td>
    <td class="actions">
      <button type="button" class="add-prompt-btn">Add Prompt</button>
      <button type="button" class="save-btn">Save</button>
    </td>
  </tr>
</template>

How to get if a radio button generated dynamically is checked or not using javascript?

1 Answers1

But first, let me separate content