JS: Добавление текстовых входов динамически не работает

Question

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

Кнопка добавляет поля, я проверяю исходный код, когда я нажимаю кнопку, и он добавляет правильные поля с правильным именем =, но когда я отправляю, информация не передается из динамически добавленных полей.

var count = 2; 
 
function addLine() { 
 
    var table = document.getElementById("myTable"); 
 
    var row = table.insertRow(-1); 
 
    var cell1 = row.insertCell(0); 
 
    var cell2 = row.insertCell(1); 
 
\t var cell3 = row.insertCell(2); 
 
\t var cell4 = row.insertCell(3); 
 
\t var cell5 = row.insertCell(4); 
 
\t cell1.setAttribute("class", "odd"); 
 
\t cell2.setAttribute("class", "odd"); 
 
\t cell3.setAttribute("class", "odd"); 
 
\t cell4.setAttribute("class", "odd"); 
 
\t cell5.setAttribute("class", "odd"); 
 
\t var input1 = document.createElement('INPUT'); 
 
\t input1.setAttribute("type", "text"); 
 
\t input1.setAttribute("name", "input" + count + "d1"); 
 
\t input1.setAttribute("class", "whtext"); 
 
\t cell1.appendChild(input1); 
 
\t cell2.innerHTML = "<input class='whtext' name='input" + count + "d2' type='text'>"; 
 
\t cell3.innerHTML = "<input class='whtext' name='input" + count + "d3' type='text'>"; 
 
\t cell4.innerHTML = "<input class='whtext' name='input" + count + "d4' type='text'>"; 
 
\t cell5.innerHTML = "<input class='whtext' name='input" + count + "d5' type='text'>"; 
 
\t document.getElementById("counter").value = count; 
 
\t count++; 
 
}

Как вы можете видеть, у меня есть две разные версии я пробовал, с AppendChild и просто добавить в innerHTML. Я новичок в JS, так что это меня озадачило.

Я запустил var_dump ($ _ POST); и ни один из добавленных полей JS не появляется.

Answer 1

Предполагая этот HTML:

<form> 
    <input type="hidden" id="counter"> 
    <table id="myTable"> 
    </table> 
    <input type="submit" value="submit"> 
</form> 

Попробуйте JS:

var count = 2; 

function addLine() { 
    var table = document.getElementById("myTable"); 
    var row = table.insertRow(-1); 
    var noOfCols = 4; 
    for (var i = 0; i < noOfCols; i++) { 
    var cell = row.insertCell(i); 
    cell.setAttribute("class", "odd"); 
    cell.innerHTML = "<input class='whtext' name='input" + count + "d" + (i + 1) + "' type='text'>"; 
    } 

    document.getElementById("counter").value = count; 
    count++; 
} 

addLine(); 

jsfiddle: https://jsfiddle.net/3tbekvc1/ (проверить сеть после того, как представить, чтобы убедиться, что форма вары являются получение отправлено)