Append row to form with append() but when it submits it doesn't include the data from appended rows

Question

Trying to make a form that can have rows appended when extra rows are needed and submit the form to a database with php and jquery. I can append the rows but when the form is submitted they are omitted from the response. Can someone clarify what is wrong?

code for form

<table class="material-form">
    <thead>
        <tr style="display: flex; flex-direction: row; justify-content: space-around;">
            <th>Sku</th>
            <th>Description</th>
            <th>Order</th>
        </tr>
    </thead>
    <?php
                $attributes = array('name' => 'count_form');
                echo form_open_multipart('request/C_request/new_material_request?wh=' .  strtolower($warehouse['warehouse_name']) , $attributes);
                ?>
    <div >
    <tbody style="display: flex; flex-direction: column;">
        <tr id="rows">
            <td><input type="textarea" id="sku" name="sku[]" onblur="sumFunction()"  style="font-size: 30px; background-color: #DCDCDC; height: 80%; margin-right: 15px" class="col-md-4" ></td>
            <td><input type="textarea" id="sku" name="sku[]" onblur="sumFunction()"  style="font-size: 30px; background-color: #DCDCDC; height: 80%; margin-right: 15px" class="col-md-4" ></td>
        </tr>
    </tbody>
    </div>

</table>
<div id="add-row" >add row<p id="counter"></p></div>
<button type="button" class="btn btn-primary btn-lg"  id="accept-count" style="">submit</button>

code for submit

jQuery(document).ready(function ($) {

    $('#add-row').click(function() {
        $('#rows').prepend('<td><input type="textarea" id="sku" name="sku[]" onblur="sumFunction()"  style="font-size: 30px; background-color: #DCDCDC; height: 80%; margin-right: 15px" class="col-md-4" ></td>'
        )
      })



    $('#accept-count').click(function () {
        document.count_form.submit();

    });

});

a form tag is not a child of a table element. A div element is not a child of a table. It does not work because your HTML is invalid — epascarello, Dec 08 '21 at 14:35
tables are for tablular data, not forms. Read about semantic markup. — ADyson, Dec 08 '21 at 14:41

score 1 · Accepted Answer · answered Dec 08 '21 at 14:40

You have invalid HTML. The browser tries to figure out what you are doing and renders it. You can not have a form and div element as a child of a table. Your html should look like

<form>
    <table>
       <thead>
       </thead>
       <tbody>
       </tbody>
    </table>
</form>

Now the way you are mucking with the css of it and using flex, I am not sure why you are even using a table.

Append row to form with append() but when it submits it doesn't include the data from appended rows

1 Answers1