0

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

Dynamic form field with entries

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

}
}
2
  • Have you considered using ajax with jquery? Commented May 26, 2020 at 16:45
  • @Hardood , I do not know about ajax and jquery, let me dig in on it and see what I will get Commented May 26, 2020 at 16:49

1 Answer 1

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.

Sign up to request clarification or add additional context in comments.

1 Comment

Thanks a lot, i just tested it out and I can retrieve the values in array form. I will take it from here :-)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.