Close html tag immediatelly - add nested Form support

[mvorisek]

Nesting html <form> tags is not possible, hovewer they can be closed immediatelly and linked with the input controls/tags, see https://stackoverflow.com/questions/3430214/form-inside-a-form-is-that-alright#21900324

Atk should support AST as much as possible, this is also how some React components cope with this html limitation.

forms spec: https://www.w3.org/TR/html52/sec-forms.html

[mvorisek]

@ibelar, @georgehristov, can you please help with this?

What I have done:

• replaced the owner <form> tag with div

• added hidden/immediatelly closed

  tag and linked the controls to it (with form attribute)

• now load /demos/form/form.php and compare the rendered source from this PR and develop -> this seems to be good

• I tried to replace the JS selectors by setting the 3rd param to be $this->formElement

but it seems to not work, the the content is not reloaded properly (compare vs. expected result on the demo above on develop)

it seems like some atk issue. JQuery serialization seems to be working well with the linked (ie. not in subtree of <form>) controls...

[ibelar]

@mvorisek - I have taken a quick look at this.

First: The HTML element set to fire the Fomantic api request is usually set to the form id. So form submit correctly but it is replacing content of the form, which in this PR has a display: none css property.

You would need to adjust this line Form::class:

 $this->js(true)
            ->api(array_merge(['url' => $cb->getJSURL(), 'method' => 'POST', 'serializeForm' => true], $this->apiConfig))
            ->form(array_merge(['inline' => true, 'on' => 'blur'], $this->formConfig));

Probably replacing with the id selector where you want to replace content.

new jQuery('#my_id')->js(true)->api()...

The other problem and I think this would be a major one, is the way Fomantic-UI is handling its form module. Especially when you need to display an error on a specific field. They have a namespace/selector mapping that you can set, but I never try and do not know if it will work. See https://fomantic-ui.com/behaviors/form.html#dom-settings

I am afraid that even if you manage to adjust field selector, their search for input is limited to the enclosed form tag, i.e. search is done inside form, not outside.

I have test manually in browser console and Fomantic throws error:

$('#atk_layout_maestro_tabs_tabssubview_form_2').form('add prompt', 'name', 'error');

[mvorisek]

$this->js(true)
        ->api(array_merge(['url' => $cb->getJSURL(), 'method' => 'POST', 'serializeForm' => true], $this->apiConfig))
        ->form(array_merge(['inline' => true, 'on' => 'blur'], $this->formConfig));

This was the issue - this means two things that were written together (not horibly bad, but I did not realized it, thanks)

The other problem and I think this would be a major one, is the way Fomantic-UI is handling its form module. Especially when you need to display an error on a specific field. They have a namespace/selector mapping that you can set, but I never try and do not know if it will work. See https://fomantic-ui.com/behaviors/form.html#dom-settings

I am afraid that even if you manage to adjust field selector, their search for input is limited to the enclosed form tag, i.e. search is done inside form, not outside.

It seems .form() on owning div is working great. It seems they already count with input controls not wrapped in <form>.

So current situation is:

• form.php demo works for me now without any issue
• CRUD works as well
• all submit/reset calls like $form->js()->submit() needs to be updated to $form->js()->submit(null, null, $form->formElement)
  • submit/reset are only the methods we need to care https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement#Methods
  • do we want to add there method to the owning div like https://stackoverflow.com/questions/4670361/how-to-add-my-own-methods-to-htmlelement-object ?
• 2b1bbc7#diff-2c77116739ece89c91385095c838f093R670 is wrong, right?

@ibelar wdyt?

[ibelar]

LGTM