How do I send the data of an (by javascript) dynamically created HTML table to a PHP file to process?

Question

(first off, I'm very new to JavaScript - HTML/PHP I know a little better)

I would like to send the table data (which is dynamically created by javascript - depending on how many students there are in the database) to a PHP file to process. The table is created and added to HTML-id "create_groups" (which is included in a HTML Form) after the button "Create Groups" has been pressed.

I've tried giving each table row it's own name ( tr.setAttribute('name', students[i][col[0]]); ) which works (at least the browser shows it in the "console" window) but when I press "submit" the Javascript table data isn't transmitted to the create_groups.php. At least I can't seem to get hold of it.

teacher.php

  function createTableFromJSON() { hideAll(); document.getElementById('create_groups').style.display = "block"; let con = new XMLHttpRequest(); //Create Object console.log("1"); con.open("GET", "teacher_check.php", true); //open the connection con.onreadystatechange = function() { //define Callback function if (con.readyState == 4 && con.status == 200) { console.log("2"); console.log(this.responseText); let response = this.responseText; let students = JSON.parse(this.responseText); //Convert String back into JSON object console.log(students); let col = []; for (let key in students[0]) { col.push(key); } // CREATE DYNAMIC TABLE. let table = document.createElement("table"); // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE. let tr = table.insertRow(-1); // TABLE ROW AT THE END let th = document.createElement("th"); th.innerHTML = "SELECT"; tr.appendChild(th); for (let i = 0; i < col.length; i++) { let th = document.createElement("th"); // TABLE HEADER. th.innerHTML = col[i]; tr.appendChild(th); } // ADD JSON DATA TO THE TABLE AS ROWS. for (let i = 0; i < students.length; i++) { tr = table.insertRow(-1); var checkbox = document.createElement('input'); checkbox.type = "checkbox"; console.log(students[i][col[0]]); //this shows the right names tr.appendChild(checkbox); tr.setAttribute('name', students[i][col[0]]); for (let j = 0; j < col.length; j++) { let tabCell = tr.insertCell(-1); tabCell.innerHTML = students[i][col[j]]; } } // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER. let divContainer = document.getElementById("create_groups"); //divContainer.innerHTML = ""; divContainer.appendChild(table); document.getElementById("create_groups").submit(); } } con.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //Set appropriate request Header con.send(); //Request File Content } function hideAll() { document.getElementById('create_groups').style.display = "none"; } 

  <input type="button" name="create_groups" value="Create Groups" onclick="createTableFromJSON()"> <form action="create_groups.php" method ="post"> <div class="container white darken-4" id="create_groups" style="display:none;"> <p> <label> <span>Groupname:</span> <input type="text" name="groupname"> </label> </p> <p><button type="submit" name ="submit">Submit</button></p> </div> 

create_groups.php

if (isset($_POST['submit'])) {
    $student = $_POST['stud'];
    $groupname = $_POST['groupname'];

   echo $groupname;
   echo $student;
}

I expect to be able to access all the names of the students in the create_groups.php file, which are checked off in the other teacher.php file in the table. Obviously the "isChecked" part isn't implemented yet, because the other part doesn't work yet.
So the creating of the table with the correct data works, just not the transmitting to the PHP file.

Answer 1

There is few issues in html syntax and javascript as well please try correcting them.

hideAll() function definition is missing in you script first line. Second in html before

tag there is unnecessary ">" character.