# Nested forms give unexpected results

**URL:** <https://discourse.cakephp.org/t/nested-forms-give-unexpected-results/10186>\
**Category:** Need Help\
**Created:** [February 24, 2022, 5:24pm UTC](https://discourse.cakephp.org/t/nested-forms-give-unexpected-results/10186 "2022-02-24T17:24:17Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![techsailor](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/techsailor/32/2450_2.png) [@techsailor](https://discourse.cakephp.org/u/techsailor)\
**Post date:** [February 24, 2022, 5:24pm UTC](https://discourse.cakephp.org/t/nested-forms-give-unexpected-results/10186/1 "2022-02-24T17:24:17Z")

</div>

I have a database table that I baked the standard CRUD skeleton. The index view creates an html table with paginated listing of the records where the last column are View/Edit/Delete actions using postLinks.

I want add a checkbox to each html table row so that I can select multiple rows and submit for processing similar to this pseudo code:

```auto
$this->Form->create($items,['url' => ['action' => 'process']])
<table>
  foreach $items as $item
    <tr>
        <td> $this->Form->checkbox('itemid[]', ['hiddenField' => false, 'value' => $item->item_id],);</td>
       <td> multiple item fields displayed</td>
       <td class="actions">
               $this->Html->link(__('Edit'), ['action' => 'edit', $item->id]) ?><br>
                $this->Form->postLink(__('Delete'), ['action' => 'delete', $item->id], ['confirm' =>__('Delete {0}?', $item->item_id)]) 
      </td>
   </tr>
      end foreach;
 </table>
 $this->Form->end()

```

When I use this approach, the postLinks behave unpredictably. When I click “Delete” postLink for the first item in the table, nothing happens and the item doesn’t get deleted from the list. The javascript console has this error:

items:78 Uncaught TypeError: Cannot read properties of undefined (reading ‘submit’)  
at HTMLAnchorElement.onclick (items:78:731)  
onclick @ items:78

I gather that nesting forms is the issue, but I’ve seen sites that have this feature the UI so I’m asking for best practice for this feature.

Thanks,  
TS

---

<div class="post-metadata">

**Author:** ![Jawfin](https://avatars.discourse-cdn.com/v4/letter/j/dbc845/32.png) [@Jawfin](https://discourse.cakephp.org/u/Jawfin)\
**Post date:** [February 25, 2022, 1:43am UTC](https://discourse.cakephp.org/t/nested-forms-give-unexpected-results/10186/2 "2022-02-25T01:43:33Z")

</div>

If the code you posted is what you’re using it looks like you have `php` code in the html document, it should have the php directives around it `<?php` & `?>`

But how that could possibly lead to javascript errors is anyone’s guess!

Edit: my attempt at putting the tags in - syntax not tested / could be wrong!

```auto
<?= $this->Form->create($items,['url' => ['action' => 'process']]) ?>
<table>
  <?php foreach ($items as $item) : ?>
  <tr>
       <td> <?= $this->Form->checkbox('itemid[]', ['hiddenField' => false, 'value' => $item->item_id],) ?></td>
       <td> multiple item fields displayed</td>
       <td class="actions">
           <?= $this->Html->link(__('Edit'), ['action' => 'edit', $item->id]) ?><br>
           <?= $this->Form->postLink(__('Delete'), ['action' => 'delete', $item->id], ['confirm' =>__('Delete {0}?', $item->item_id)]) ?>
      </td>
   </tr>
   <?php endforeach; ?>
 </table>
 <?= $this->Form->end() ?>

```

Note that was a stack of editing, fixing reserved words, putting in language punctuation like brackets, etc!  
The code itself may need cleaning, like why the `hiddenfield` property? I didn’t examine it further, this is just the starting place.

---

<div class="post-metadata">

**Author:** ![techsailor](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/techsailor/32/2450_2.png) [@techsailor](https://discourse.cakephp.org/u/techsailor)\
**Post date:** [February 25, 2022, 3:24am UTC](https://discourse.cakephp.org/t/nested-forms-give-unexpected-results/10186/3 "2022-02-25T03:24:55Z")

</div>

Thanks for the reply, Jawfin.

I was listing pseudo code for brevity. My production code is properly formatted html and in-line php statements with appropriate delimiters.

I don’t have any php warning or errors. Only javascript console errors in the browser (tested on chrome, firefox and safari).

---

<div class="post-metadata">

**Author:** ![Jawfin](https://avatars.discourse-cdn.com/v4/letter/j/dbc845/32.png) [@Jawfin](https://discourse.cakephp.org/u/Jawfin)\
**Post date:** [February 25, 2022, 3:30am UTC](https://discourse.cakephp.org/t/nested-forms-give-unexpected-results/10186/4 "2022-02-25T03:30:30Z")

</div>

Ah makes sense!

CakePHP doesn’t generate any JavaScript (AFAIK) so any scripting errors have come from somewhere else. Unless you’re just referring to the developer’s console only. That Submit would most likely tie back to a POST command, maybe it needs a Submit button? Or is that form feeding into JS like an AJAX?

It seems though I’m not understanding the issue, so we’ll just wait for an expert to answer here!

---

<div class="post-metadata">

**Author:** ![ndm](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/ndm/32/2234_2.png) [@ndm](https://discourse.cakephp.org/u/ndm)\
**Post date:** [February 25, 2022, 6:51pm UTC](https://discourse.cakephp.org/t/nested-forms-give-unexpected-results/10186/5 "2022-02-25T18:51:21Z")

</div>

Forms cannot be nested, that’s simply invalid in HTML, and will result in unpredictable rendering (most browsers drop the nested form and render its contents outside of the parent).

Assign the POST link forms to a block instead, and render it outside of the main form.

```php
<?= $this->Form->postLink(
    __('Delete'),
    ['action' => 'delete', $item->id],
    [
        'confirm' => __('Delete {0}?', $item->item_id),
        'block' => 'postLinkForms', // << there
    ]
) ?>

```

```php
<?= $this->Form->end() ?>
// ...
<?= $this->fetch('postLinkForms') ?>

```

See also the note in the Cookbook: **[Form - 4.x](https://book.cakephp.org/4/en/views/helpers/form.html#creating-post-links)**

---

<div class="post-metadata">

**Author:** ![techsailor](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/techsailor/32/2450_2.png) [@techsailor](https://discourse.cakephp.org/u/techsailor)\
**Post date:** [April 3, 2022, 12:23am UTC](https://discourse.cakephp.org/t/nested-forms-give-unexpected-results/10186/6 "2022-04-03T00:23:52Z")

</div>

This works as desired. Thanks ndm!