How to add multiple rows in html and js and then add all rows into database?

Question

I need help. I am able to add another row to the table on my html webpage but only one row is saved into the database after I input the data. I am not sure what I am doing wrong. Can someone please help or guide me into the right direction. I need it to be javascript. As simple as possible. Thank you My database is called logworkout

<script>
        function addRow(tableID) {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var cell1 = row.insertCell(0);

            var cell2 = row.insertCell(1);
            var element1 = document.createElement("input");
            element1.type = "text";
            element1.name = "routine";
            element1.placeholder = "routine";
            cell2.appendChild(element1);

            var cell3 = row.insertCell(2);
            var element2 = document.createElement("input");
            element2.type = "text";
            element2.name = "repetitions";
            element2.placeholder = "repetitions";
            cell3.appendChild(element2);

            var cell4 = row.insertCell(3);
            var element3 = document.createElement("input");
            element3.type = "text";
            element3.name = "sets";
            element3.placeholder = "sets";
            cell4.appendChild(element3);

        }
</script>




    <table id="dataTable" width="350px" border="1">
        <tr>
    
        <td><label for="exercise">Exercise:</label></td>
        
        <td><input type="text" placeholder="routine" name="routine" id ="routine" ></td>
        
        <td><input type="text" placeholder="repetitions" name="repetitions" id ="repetitions" ></td>
        
        <td><input type="text" placeholder="sets" name="sets" id ="sets" ></td>
        </div>
    </tr>
    </table>
        <input type="button" value="Add Row" onclick="addRow('dataTable')" />
        <input type="submit" name="submit" value="Submit" id="submit">
</form>

None of this code appears to interact with the database, so not sure how we're supposed to help debug an issue with the database. Also, what kind of database? — chiliNUT
– chiliNUT, Commented Mar 15, 2021 at 4:58
Probably you might need an array, in which you need to push all your data. The preferred way would be keeping a data in key:value format and then on your submit call, pass that array in data attribute. Hope that helps — Himanshu Saxena
– Himanshu Saxena, Commented Mar 15, 2021 at 6:03
@NewtoProgramming, Your starting form tag should have a "action" attribute and it's value shows the file name where user input data will be processed. Please provide us that code too. Please make sure that the query code also be given. — perfectionist1
– perfectionist1, Commented Mar 15, 2021 at 8:44

hectorpc7n · Accepted Answer · 2021-03-15 06:50:56Z

1

I don't see procedure that handle saving to DB, either start Form tag , may be submit request is sent to server housing web file. This request can be handle by page javascript function too! Anyway, I think, to avoid your problem, the most important is how these procedures reference to form control elements, where I believe is your mistake. For example, one way you can reference property value, from your form inputs "routine" elements, in javascript is that way: document.forms[0].routine[0].value, for first row, document.forms[0].routine[1].value, for second row . ..... If you send request to external server side file for saving to DB, that procedure must take care for referencing correctly for each input element with the same name.

edited Mar 15, 2021 at 6:50

answered Mar 15, 2021 at 6:36

hectorpc7n

244 bronze badges

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

Collectives™ on Stack Overflow

How to add multiple rows in html and js and then add all rows into database?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related