How to display radio and checkbox values in table using javascript?

Question

When I click display button it displays name and age but gender and checkbox is incorrect it displays first value only. I want to display which i select. radio data and checkbox data should display.

(function setup() {
  "use strict";

  var NameElem = document.getElementById("name");
  var genderElem = document.getElementById("gender");
  var ageElem = document.getElementById("age");
  var languageElem = document.getElementById("language");
  var tableElem = document.getElementById("table");
  document.getElementById("display").addEventListener("click", function() {
    var newRow = tableElem.insertRow(-1);
    var newCell = newRow.insertCell(0);
    var newText = document.createTextNode(NameElem.value);
    newCell.appendChild(newText);
    newCell = newRow.insertCell(1);
    newText = document.createTextNode(genderElem.value);
    newCell.appendChild(newText);
    newCell = newRow.insertCell(2);
    newText = document.createTextNode(ageElem.value);
    newCell.appendChild(newText);
    newCell = newRow.insertCell(3);
    newText = document.createTextNode(languageElem.value);
    [newCell.appendChild][1](newText);
    NameElem.value = "";
    genderElem.value = "";
    ageElem.value = "";
    languageElem.value = "";
    tableElem.value = "";
  });
})();

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container">
  <br>
  <br>
  <h3 class="text-center">Display answers of form fill in inside a table</h3>
  <br>
  <br>
  <form>
    <div class="form-group">
      <label>First Name</label>
      <input id="name" class="form-control form-control-sm" />
    </div>

    <div class="form-group">
      <label>Age</label>
      <input id="age" class="form-control form-control-sm" />
    </div>

    <div class="form-group">
      Gender:<input type="radio" name="male" id="gender" value="male">Male

      <input type="radio" name="female" id="gender" value="female">
      <label for="female">Female</label>
    </div>

    <div class="form-group">
      <label>Language</label>
      <input type="checkbox" id="language" name="malayalam" value="Malayalam">Malayalam
      <input type="checkbox" id="language" name="english" value="English">English
      <input type="checkbox" id="language" name="hindi" value="Hindi">Hindi
    </div>
    <button type="button" id="display" class="btn btn-sm btn-primary">Display</button>
  </form>

  <br>
  <br>

  <table class="table border" id="table">
    <tr>
      <th>Name</th>
      <th>Gender</th>
      <th>Age</th>
      <th>Language</th>
    </tr>
  </table>

  <script type="text/javascript" src="form.js"></script>
</div>

You shouldn't be using all those line breaks for layout. That's not what they're for and they're messy. See https://getbootstrap.com/docs/4.6/utilities/spacing/ — isherwood, Dec 02 '21 at 14:10
Hi! You have the script tag before you close the `class="container"` div.. you should put scripts at the bottom before the closing body tag instead. To your question: You should use `.checked`, not `.value`. — Peter Krebs, Dec 02 '21 at 14:11
Does this answer your question? [How can I check if a checkbox is checked?](https://stackoverflow.com/questions/9887360/how-can-i-check-if-a-checkbox-is-checked) — Peter Krebs, Dec 02 '21 at 14:11
I want to disaply radio and check box value in table not alert box. Please help — Ranjitha Sanker, Dec 02 '21 at 14:24

score 0 · Answer 1 · answered Dec 02 '21 at 15:16

Well, the code does exactly what you asked for.

var genderElem = document.getElementById("gender");
// returns the element with ID "gender"

You are mixing name attribute with ID. An ID must always be unique : a web page can't contain several elements with the same ID.

What you are looking for is the checked input of name "gender".

var genderValue = '';
document.querySelectorAll('input[name=gender]').forEach((e)=>{
if (e.checked==true) { genderValue = e.value; }
});

Nimitt Shah · Answer 2 · 2021-12-03T15:18:36.990

Couple of mistakes you did:

Radio buttons and Checkboxes should always have same name if they are in the same group.

Always keep ID different, its bad practice to keep ID same for multiple elements.

When you are trying to get the value of Radio button or Checkboxes, fetch it using getElementsByName and run a loop over all on click of display button not outside.

Safer side and to reduce the LOC, give your form an ID and reset the form on submit using formId.reset() method. (in your code I have given form an id myForm so I have added myForm.reset(); at the end of the code on submit method)

See the Snippet below:

(function setup() {
  "use strict";

var myForm = document.getElementById("myForm");
  var NameElem = document.getElementById("name");
  var ageElem = document.getElementById("age");
  var genderElem = document.getElementsByName('gender');
  var languageElem = document.getElementsByName("language");
  var tableElem = document.getElementById("table");
  var selectedGender = '';
  var selectedLanguages = [];
  
  document.addEventListener("click", function(event){
    if(event.target.classList.contains("delete")){
      var row = event.target.parentNode.parentNode;
      row.parentNode.removeChild(row);
    }
  });
   
  document.getElementById("display").addEventListener("click", function() {
    for(var i = 0; i < genderElem.length; i++) {
        if(genderElem[i].checked)
          selectedGender = genderElem[i].value;
     }
     
     for(var i = 0; i < languageElem.length; i++) {
        if(languageElem[i].checked)
          selectedLanguages.push(languageElem[i].value);
     }
    var newRow = tableElem.insertRow(-1);
    var newCell = newRow.insertCell(0);
    var newText = document.createTextNode(NameElem.value);
    newCell.appendChild(newText);
    newCell = newRow.insertCell(1);
    newText = document.createTextNode(selectedGender);
    newCell.appendChild(newText);
    newCell = newRow.insertCell(2);
    newText = document.createTextNode(ageElem.value);
    newCell.appendChild(newText);
    newCell = newRow.insertCell(3);
    newText = document.createTextNode(selectedLanguages.toString());
    newCell.appendChild(newText);
    newCell = newRow.insertCell(4);
    var deleteBtn = document.createElement("button");
    deleteBtn.textContent = "Delete";
    deleteBtn.classList.add("delete");
    newCell.appendChild(deleteBtn);
    /*NameElem.value = "";
    genderElem.value = "";
    ageElem.value = "";
    languageElem.value = "";
    tableElem.value = "";*/
    myForm.reset();
    selectedGender = "";
    selectedLanguages = [];
  });
})();

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container">
  <br>
  <br>
  <h3 class="text-center">Display answers of form fill in inside a table</h3>
  <br>
  <br>
  <form id="myForm">
    <div class="form-group">
      <label>First Name</label>
      <input id="name" class="form-control form-control-sm" />
    </div>

    <div class="form-group">
      <label>Age</label>
      <input id="age" class="form-control form-control-sm" />
    </div>

    <div class="form-group">
      Gender:<input type="radio" name="gender" id="male" value="Male">
      <label for="male">Male</label>

      <input type="radio" name="gender" id="female" value="Female">
      <label for="female">Female</label>
    </div>

    <div class="form-group">
      <label>Language</label>
      <input type="checkbox" id="malayalam" name="language" value="Malayalam">Malayalam
      <input type="checkbox" id="english" name="language" value="English">English
      <input type="checkbox" id="hindi" name="language" value="Hindi">Hindi
    </div>
    <button type="button" id="display" class="btn btn-sm btn-primary">Display</button>
  </form>

  <br>
  <br>

  <table class="table border" id="table">
    <tr>
      <th>Name</th>
      <th>Gender</th>
      <th>Age</th>
      <th>Language</th>
      <th>Action</th>
    </tr>
  </table>

  <script type="text/javascript" src="form.js"></script>
</div>

UPDATE 1 : Added delete row feature

document.addEventListener("click", function(event){
    if(event.target.classList.contains("delete")){
      var row = event.target.parentNode.parentNode;
      row.parentNode.removeChild(row);
    }
  });

newCell = newRow.insertCell(4);
var deleteBtn = document.createElement("button");
deleteBtn.textContent = "Delete";
deleteBtn.classList.add("delete");
newCell.appendChild(deleteBtn);

It is working . Thank you. I need one more thing, When i select delete button it should delete one by one row in the table except header please help — Ranjitha Sanker, Dec 03 '21 at 03:12

How to display radio and checkbox values in table using javascript?

2 Answers2