Retrieving HTML dynamic form fields data and saving to MySQL database

Question

I am trying to save data from a html form to MySQL database. I am quite new to web dev and javascript. I have a form in which the user can add row fields depending on how many rows they need. The form can successfully add and delete rows but the problem is retrieving all row fields. I can access only the last row details when i use $_POST in my form_process php file. How can I retrieve all the row fields that the user will create so that I can save them to the database?

I tried these posts but they are not dealing with dynamic form fields: Canonical: How to save HTML form data into MySQL database and Dynamic form field creation and saving in database php mysql

The image below shows the form with 3 rows field out. How can I retrieve all the row values so that I save them to a table on a MySQL database? Thank you very much for your time in advance

My HTML form code is below:

        <fieldset class="row2">
        <legend>Bus Data</legend>
        <p> 
            <input type="button" value="Add Bus" onClick="addRow('busDataTable')" /> 
            <input type="button" value="Remove Bus" onClick="deleteRow('busDataTable')"  /> 
            <p>(Remove action applies only to a column with a marked check box.)</p>
        <p>

        <table id="busDataTable" class="form" border="1">
            <tbody>
                <tr>
                    <p>
                        <td><input type="checkbox"  name="chk[]" checked="checked" /></td>
                        <td>
                            <label>Bus #</label>
                            <input type="text" required="required" name="Bus_Number">
                        </td>
                        <td>
                            <label for="Load_kW">Load kW</label>
                            <input type="text" required="required"   name="Load_kW">
                        </td>
                        <td>
                            <label for="Load_kVAR">Load kVAR</label>
                            <input type="text" required="required"   name="Load_kVAR">
                        </td>
                        <td>
                            <label for="Voltage_kV">Voltage kV</label>
                            <input type="text" required="required"   name="Voltage_kV">               
                        </td>
                    </p>
                </tr>
            </tbody>
        </table>

My PHP code that is suppose to process the form: (Here is where the main problem is, I can retrieve for a single row but how do I retrieve for all rows?

        <?php
    // put your code here
    // Connecting to mySQL database
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "Radial Distribution System";

    // Create connection to database and get power system data
    mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT); // for showing the exact error on the html page
    $conn = new mysqli($servername, $username, $password, $dbname);        


    $_busNumber = array();
    $_busNumber []= $_POST['Bus_Number'];
    print_r($_busNumber);



    $conn->close();
    ?>

The javascript code that creates/adds the extra rows:

function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount < 66){                          // limit the user from creating fields more than your limits
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for(var i=0; i<colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    }
}else{
     alert("Maximum nodes for this platform is 66.");

}
}

Answer 1

You can define the HTML form fields to be populated as arrays in PHP by adding [] to the end.

<input type="text" required="required" name="Bus_Number[]">

Above would result in $_POST['Bus_Number'] to be an array in PHP and you can process it from there.