Форма submit предоставление Неопределенное значение

Question

У меня есть таблица, которую я генерирую, и у нее есть кнопка сортировки. Я хочу, чтобы получить колонку пользователь хочет сортировать, но я продолжаю получать неопределенное значение рода, когда я пытаюсь получить значение из «byColumn»: Некоторой помощь будет оценен:

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

    } 

Answer 1

Вам необходимо использовать .getElementsByName("byColumn"), чтобы получить все входы с name='byColumn' не .getElementById("byColumn"). затем цикл по всем радио, чтобы получить .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>

Answer 2

Вам нужно добавить id = "byColumn" на вход с именем "byColumn".

ID используется браузером, имя которого используется сервером.

Поскольку у вас нет идентификатора в теге, document.getElementById возвращает null, а null не имеет атрибута значения.