J. Doe J. Doe - 1 month ago 5
HTML Question

Form submit giving Undefined value

I have a table that I am generating and it has a sort button. I want to get the column the user wants to sort by but I keep getting a undefined value in sort when I try to get the value from "byColumn":
Some help would be appreciated:

function createTable(data){
var str = "<form id='tableSelect' action='javascript:void(0);'><table><thead><tr> <th>TicketNum</th><th>Recieved</th><th>SenderName</th><th>Sender Email</th><th>Subject</th><th>Tech</th><th>Status</th><th>Select</th></tr></thead><tbody>";

for(var key in data){
if (!data.hasOwnProperty(key)) continue;
var row = data[key];
str += "<tr> <td>";
str += row['TicketNum'] + "</td><td>";
str += row['Recieved'] + "</td><td>";
str += row['SenderName'] + "</td><td>";
str += row['SenderEmail'] + "</td><td>";
str += row['Subject'] + "</td><td>";
str += row['Tech'] + "</td><td>";
str += row['Status'] + "</td><td>";
str += "<input type='radio' name ='selectRow' value=" +row['TicketNum'] + ">" + "</td></tr>";
}
str += "<tr><td> Sort By: <input type = 'radio' name = 'byColumn' value='TicketNum'><td> Sort By: <input type = 'radio' name = 'byColumn' value='Recieved'><td> Sort By: <input type = 'radio' name = 'byColumn' value='SenderName'><td> Sort By: <input type = 'radio' name = 'byColumn' value='SenderEmail'><td> Sort By: <input type = 'radio' name = 'byColumn' value='Subject'><td> Sort By: <input type = 'radio' name = 'byColumn' value='Tech'><td> Sort By: <input type = 'radio' name = 'byColumn' value='Status'><td> <button type ='button' value='Submit' button class=\"myButton\" onclick=\"sort();\">Sort</button> </tr>";

str += "</tbody></table></form>";
console.log(str);
document.getElementById("table").innerHTML = str;
}
function sort(){
var table = currentTable;
var sortby = document. getElementsByName("byColumn").value; //the error is on this line
alert(sortby);

}


enter image description here

Answer

You need to use .getElementsByName("byColumn") to get all inputs with name='byColumn' not .getElementById("byColumn"). then loop over all radio's to get .checked .value

var data = [{
'TicketNum':'TicketNum',
'Recieved':'Recieved',
'SenderName':'SenderName',
'SenderEmail':'SenderEmail',
'Subject':'Subject',
'Tech':'Tech',
'Status':'Status'
},{
'TicketNum':'TicketNum',
'Recieved':'Recieved',
'SenderName':'SenderName',
'SenderEmail':'SenderEmail',
'Subject':'Subject',
'Tech':'Tech',
'Status':'Status'
},{
'TicketNum':'TicketNum',
'Recieved':'Recieved',
'SenderName':'SenderName',
'SenderEmail':'SenderEmail',
'Subject':'Subject',
'Tech':'Tech',
'Status':'Status'
}];
createTable(data);
    function createTable(data) {
      var str = "<form id='tableSelect' action='javascript:void(0);'><table><thead><tr> <th>TicketNum</th><th>Recieved</th><th>SenderName</th><th>Sender Email</th><th>Subject</th><th>Tech</th><th>Status</th><th>Select</th></tr></thead><tbody>";
    
      for (var key in data) {
        if (!data.hasOwnProperty(key)) continue;
        var row = data[key];
        str += "<tr> <td>";
        str += row['TicketNum'] + "</td><td>";
        str += row['Recieved'] + "</td><td>";
        str += row['SenderName'] + "</td><td>";
        str += row['SenderEmail'] + "</td><td>";
        str += row['Subject'] + "</td><td>";
        str += row['Tech'] + "</td><td>";
        str += row['Status'] + "</td><td>";
        str += "<input type='radio' name ='selectRow' value=" + row['TicketNum'] + ">" + "</td></tr>";
      }
      str += "<tr><td> Sort By: <input type = 'radio' name = 'byColumn' value='TicketNum'><td> Sort By: <input type = 'radio' name = 'byColumn' value='Recieved'><td> Sort By: <input type = 'radio' name = 'byColumn' value='SenderName'><td> Sort By: <input type = 'radio' name = 'byColumn' value='SenderEmail'><td> Sort By: <input type = 'radio' name = 'byColumn' value='Subject'><td> Sort By: <input type = 'radio' name = 'byColumn' value='Tech'><td> Sort By: <input type = 'radio' name = 'byColumn' value='Status'><td> <button type ='button' value='Submit' button class=\"myButton\" onclick=\"sort();\">Sort</button> </tr>";
    
      str += "</tbody></table></form>";
      //console.log(str);
      document.getElementById("table").innerHTML = str;
    }
    
    function sort() {
      //var table = currentTable;
      var col = document.getElementsByName("byColumn"); //the error is on this line
      var sortby;
      for (var i = 0; i < col.length; i++) {
        if (col[i].checked) {
          sortby = col[i].value;
          break;
        }
      }
      alert("sort by: "+sortby);
    
    }
<div id='table'></div>