Form being closed unexpectedly, input should be inside but is outside of form

Question

I created a form (below) to collect a single input.

<?php foreach($products as $product) { ?>
    <?=form_open('','data-id="'.$product['product_id'].'"')?>
         <tr class="<?=$product['product_id']?>">
            <td>
                <?=$product['product_name'];?>
            </td>

            <td>
                <div class="form-group">
                     <div class="col-xs-12">

                          <!--single input-->
                          <input type="text" class="typeahead clean form-control" data-id="<?=$product['product_id']?>" autocomplete="off" name="<?=$product['product_id']?>">
                     </div>
                 </div>
            </td>

            <td>
                 <div class="text-center">

                      <!--submit button-->
                      <button type="submit" class="font-tiny capitalized no-underline btn btn-primary btn-sm"> <i class="fa fa-check font-medium"></i> Submit</button>
                 </div>
            </td>
        </tr>
    </form>
 <?php } ?>

The code looks ok above and when I view page source, but when I inspect element the form is closed right away. Like this:

<form action="http://merchantfuse.localhost:8888/company/add/batch_pending" data-id="7" method="post" accept-charset="utf-8"></form>

The form is not working properly, when I submit it, the value submitted is from another input located in the header. Does anyone have any idea as to why this might be happening? Thanks

Answer 1

The opening and closing table html tags (<table> </table>) need to be inside your form tags. It is not valid html to split a table with a form so the browser ends the form straight away, see Is a form valid over a tr

This will give you:

<form>
    <table>
        <tr>
            <td>
                <div>Cell content</div>
            </td>
        </tr>
    </table>
</form>