CODEWITHSUNDEEP
javascriptjquery
Jordan Davis
Jordan Davis

Reputation: 875

Can't return value of dynamically created checkbox

I am creating form fields within my table, I then use javascript to create the rows in the table and build the rows with the needed fields. below is my javascript.

function createRow() {  
    for (var i=0;i<rows3;i++){ 

        if (document.getElementById('buID').value==agile1[i]['BU_ID']){
            var rowCount = document.getElementById("mytable").rows.length;
            document.getElementById("rowIDcount").value=rowCount;
            console.log(agile1[i]['Agile_team']);
            x=x+1;
  var row = document.createElement('tr'); // create row node
  var rowid = document.createElement('td');
  var col = document.createElement('td'); // create column node
  var col2 = document.createElement('td'); // create second column node
  var col3 = document.createElement('td');
  var col4 = document.createElement('td');
  var col5 = document.createElement('td');
  var col6 = document.createElement('td');

  row.appendChild(rowid);
  row.appendChild(col); // append first column to row
  row.appendChild(col2); // append second column to row
  row.appendChild(col3);
  row.appendChild(col4);
  row.appendChild(col5);
  row.appendChild(col6);


  var rowids="<input id='row"+x+"'readonly value='"+x+"'>";
  agile="<input  id='agileteams"+x+"'readonly value='"+agile1[i]['Agile_team']+"'>";
  var strategic="<input type='number' min='0' max='100' id='strategic"+x+"'>";
  var Initiatives="<input type='number' min='0'  id='numInts"+x+"'>";
  var NewName="<input id='newname"+x+"'>";
  var deleteTeam="<input type='checkbox' value='1' id='deleteteam'"+x+"''>";
  var RenameTeam="<input type='checkbox' id='renameteam'"+x+"''>";


  rowid.innerHTML=rowids;
  col.innerHTML=agile;
   col2.innerHTML=strategic;
   col3.innerHTML=Initiatives;
   col4.innerHTML=deleteTeam;
   col5.innerHTML=RenameTeam;
   col6.innerHTML=NewName;
  var table = document.getElementById("mytable"); // find table to append to
  table.appendChild(row);

}
}
}

After I create my rows, I can return the values of the textboxes but not the check box elements. I am using document.getElementByID('deleteteam1').value to return the value, but I get the following error.

Uncaught TypeError: Cannot read property 'value' of null

Keep in mind if I use document.getElementByID('agileteams1').value it return the value.

What I am doing wrong?

Upvotes: 0

Views: 131

Answers (1)

Shyju
Shyju

Reputation: 218732

You have extra single quotes which is creating the wrong id property value for your checkbox element. So when you access document.getElementByID('agileteams1') , it is going to return null as it does not exist. we cannot call any method/properties on a null

Change

var deleteTeam="<input type='checkbox' value='1' id='deleteteam'"+x+"''>";

to

var deleteTeam="<input type='checkbox' value='1' id='deleteteam"+x+"'>";

Upvotes: 3

Related Questions