Cannot use multiple forms in the same panel (wrongly nested forms)

Hello!

Unfortunately, this issue has remained open, without activity, for a very long time. I hope you can understand that between maintaining the module, work, and other obligations, the maintainers are very busy. This leads to not all issues being answered.

In order to figure out which bugs that are still present, I'm going over all low activity bug reports that has not been touched for 6 months, and marking them "Postponed, needs info". In many cases, I expect the bug to have been solved by a newer version of Panels..

If you can still reproduce this issue with the latest dev version of Panels, please just reset it's status to active, and we'll try to work it out. Please remember to post any new information that may be relevant, such as any attempts of your own at debugging.

Regards, Letharion

A month has passed, and I'm going over the issue queue ones more. Some issues have been closed for other reasons, some re-opened, but this issue has remained silent for the past month.
Because of this, I'm doing a bulk close of a number off issues. I'm sorry that it happened this way, but the issue queue has had to few contributors, and to many questions.

Again, as said in the previous comment, feel free to re-open the issue by setting it to active, if you still need help.

Regards, Letharion.

I m facing exactly same problem here. I think Mr. gunzip has left this.
But I am facing the same issue even after 1 year and in next version of Panels.

The issue can be reproduced very easily. Under Panels, create a new page and add a context : Node Add (any user defined content..)
Then create a simple View with any Filter "Exposed".
This situation generates 2 forms : Node Add & Exposed Filter. And now however you handle, Exposed Filter fails. I tried all Layouts of Panels, tried adding new regions, rows etc.. nothing works. This is because the Form element of Node Add gets created right where Content Pane commences and remains throughout.. Even enabling Ajax in views does not work..

Can you take this on priority and help handling this?

Have a look at the images. I have added border to Form element in CSS which shows how elongated the form is..

You can't do this. In HTML it is illegal to place one form inside another. Therefore, it is absolutely impossible to place a views exposed filter block (legally) inside a panel using any form context. There is no workaround.

The closest thing to a workaround might be to have a mini panel that uses your node form context so that you can have it in a panel side by side with the views exposed filter.

hey merlinofchaos!

i m so glad (and honored, thrilled, moved... i dont know what to say.. i never imagined you [THE MAKER OF CTOOLS etc] will personally attend my issue) that u r listening and tried to help. Yes your trick works. I created Mini Panel and included in Landing Page along with View and it works. So this way I think I can create as many components using Mini Panels and include them in one page and then will have independent settings..

**But do u think this is bug? Because i think the form design should just start before definition of fields and should end with submit button (correct me if i m wrong) which should allow us to include as many forms independently. Basically I m not developing website but a web based application. Here Form is most important & most accessible thing because people add/edit more than views & reports. Can we (i mean you, i m too young for drupal) consider this while thinking n developing of D7 & D8 core or u have some purpose while doing it this way.

Unfortunately, there is no way to do what you suggest. The 'node add form' context turns the entire panel into a form so that you can arrange the form fields how you like. That means the entire panel *must* be a form. You can't just kind of figure out which regions have form fields and shrink the form just to match; that's beyond the ability of the system to do.

I agree with you, but cant it imagine/understand that something may follow it later which may have additional form.. like Views.
and my application is live example for this. Also look at arrangement where simple pages can be designed which will have node add/edit form at top and list of content below. Such pages are very useful when adding entity reference type things like List of Cities, Departments etc. People can create, edit and view such nodes on same page... and being their views exposed, they can filter as well..

I will like to get involved in this feature development. I dont know where to start from. Can you please guide me?

No, the *entire panel* becomes a form. IN fact, the FORM tag is outside the panel. So there isn't anything 'following' it.

I have ran into the same(? at least very similar) problem: I was to have a $node_type_A and $node_type_B node add form below/in a node view page of $node_type_C. Adding the (two additional) node forms to the node/%node panel was a no-go, since using the submit button on $node_type_A form led to adding a $node_type_B node (I think because of the messed up HTML, but haven't looked into that that deeply). Then I introduced a mini panel for $node_type_A and another for $node_type_B, added those mini panels to the "main" panel, and voilá: it solved the problem for me.

I was using ctools-7.x-1.2 with #1739718: assign property of non-object in ctools_block_content_type_render, panels-7.x-3.3 (vanilla) on drupal-7.16, FTR. Seems these three issues are related to each other: #1243430: Multiple node add forms, #899746: Can't insert multiple node add form into single panel page and #1158850: Cannot use multiple forms in the same panel (wrongly nested forms) (this one).

Merlin's explanation was extremely helpful, thanks very much for this. I'm going to try the mini panel solution now.

Indeed. Wrapping each form in its own mini panel lets me display multiple comment forms and node edit forms for separate nodes all on the same panelized page. (In our case this is great UX for a homebrew ticket / support request management system.) Thanks again Merlin!

@merlinofchaos

This is a critical issue in-deed with respect to DOM ...
Even create a minipanel on node-form context below html generated,same is applicable for panel as well.

<form class="node-form node-article-form" enctype="multipart/form-data" action="/drupal/c-page" method="post" id="article-node-form" accept-charset="UTF-8"><div><form class="node-form node-article-form" enctype="multipart/form-data" action="/drupal/c-page" method="post" id="article-node-form" accept-charset="UTF-8"><div><div class="panel-flexible panels-flexible-5 clearfix" id="mini-panel-test_minipanel">
<div class="panel-flexible-inside panels-flexible-5-inside">
<div class="panels-flexible-region panels-flexible-region-5-center panels-flexible-region-first panels-flexible-region-last">
  <div class="inside panels-flexible-region-inside panels-flexible-region-5-center-inside panels-flexible-region-inside-first panels-flexible-region-inside-last">
  </div>
</div>
</div>
</div>
</div></form></div></form> 

That's fine form is available for entire panel! but why nested form stucture

I don't really understand why this is re-opened. As I said above, this isn't fixable.

@merlinofchaos - closed(wont'fix) & closed(fix) both status has difference right?
Panel cannot resolve the basic understanding of DOM - right?
Please make it again closed if you don't have any solution right now!
in my case i can't use node-add-form context any where as one of my js giving error for this reason
need to implement hook_theme as of basic understanding of drupal

roynilanjan:

In order to successfully include two separate forms via Panels, you need to include each separate form in its own Mini Panel. Otherwise, the "node-add-form" will turn the entire panel page into a form, resulting in (at best) very invalid HTML if you try to use a second form anywhere.

If you include two separate Mini Panels, each of which contain their own forms, within a single Panels page, it will work properly.

Even I use node-add-form context with mini-panel, this problem won't be fixed
when I include mini-panel under a panel region again form will be available for this entire variant of panel.
Moreover nested form structure still persists!

So my solution is instead of node-form context we should make a ctools plugin(Content type plugin) which execute node-form within that plugin & make context-plugin which provide configure for the bundles of node so that context object will be available in the plugin.

what do you think @Kazanir?

Roynilanjan: If you want to include two forms, they need to be in separate minipanels, and you need to not have edit-form context on the outer panel variant at all.

What I do is this:

1. I have a panels page. This page takes an argument from the URL and loads a node context. (JUST the node context, NOT node-edit-form context.)

2. The panel passes its node context to two mini-panels, call them Edit Minipanel and Comment Minipanel.

3. The minipanels use the passed in node context to load a matching context of the Node Edit Form or Comment Add Form. (I forget the precise names but you get the point.)

4. Since the main panels page doesn't have any form context and the minipanel form context is "contained" with in the mini-panel, I am safe.

I have successfully used this method to represent four different forms on a single panels page and it works perfectly.

Ok,

But your point number - 3
"the mini-panels use the passed in node context to load a matching context of the Node Edit Form" - when you want to use node form in mini-panel means in minipanel you use node-form-context - am I right? - here is my problem if I use node-form-context nested form structure generates!

If I use form context ONLY within each minipanel, I do not get a nested form structure -- each form tag is safely confined within its mini panel rather than expanding to the main panels page.

yes I can do two different form using each mini-panel as you said before but can't use context node-add-form for nested form structure!
so either go with basic node-form theme concept of drupal instead of panel for node-form OR as I said before execute form within a content-type plugin(Ctools) instead of form context to avoid this nested structure!

Yes, that's correct.

Panels cannot just make a part of a panel be inside a form tag. Either's either the entire layout or just one pane. It is not possible to do anything else.

HTML will not let you nest form tags. It's illegal syntax and if you try it, one of the forms becomes part of the other form.

Therefore, those are your choices. It can't be changed.

I'm sorry for re-opening this but either I'm doing something wrong with all of my node-add forms or otherwise panels simply does not work with node-add forms whatsoever without causing nesting of form elements (i.e. making the HTML invalid, despite the fact modern browsers might fix it automatically after guessing).

It would be great if someone else can verify what I'm seeing by setting up a panel (or even a mini-panel as a block) and check the source code that's delivered (NOT the web inspector or Firebug version that's already been fixed by the browser). This is with ONE node add form with no added view filters or anything else added.

The problem occurs whether I add the whole form, or as shown in the following example, just components of the form.

<div class="content">
    <div class="contextual-links-region">
<form class="node-form node-example-form" action="/mywebsite/example-panel" method="post" id="example-node-form--2" accept-charset="UTF-8">
<fieldset>
<form class="node-form node-example-form" action="/mywebsite/example-panel" method="post" id="example-node-form--2" accept-charset="UTF-8"><fieldset>

I emphasise that the problem is that nesting ALWAYS occurs, hence why the mini-panels workaround might work in one setting and not another (e.g. dependent on how the browser handles nested form elements). If Firefox sees a
tag it will ignore all future form starting tags until a

end tag is found. Any subsequent

tags will be ignored until a new
start tag is established.

Sorry if it's just a stuff up on my end.

(Note that I am using a Panopoly distro, if it makes a difference).

I don't have the same problems if I simply load my 'node add form' into a block using code.

For example,

function custom_example_block_info() {

    $blocks['example_node_form'] = array(
       'info' => t('What an example'), 
    );
    return $blocks; 

}

function custom_example_block_view($delta = ''){

    $block = array();

    switch ($delta) {
        case 'example_node_form':
            global $user;
                        //Note: 'type' is your node content type and 'language' must be included
            $node = (object) array('uid' => $user->uid, 'name' => (isset($user->name) ? $user->name : ''), 'type' => 'example', 'language' => LANGUAGE_NONE);

            $form_state['build_info']['args'] = array($node);

            form_load_include($form_state, 'inc', 'node', 'node.pages');
            $block['content'] = drupal_build_form('example_node_form', $form_state);

            break;
    }
return $block; 

}

I can load this block into a panel without any nested forms forming.

Blocks of course have some limitations but I haven't researched them all yet or if there are potential issues down the line. I haven't tried the 'Advanced Form Block' module (https://drupal.org/project/afb) which also adds some flexibility to blocks (unlimited blocks of the same type, you can choose which (non-required) fields you want, and even AJAX loading of each form).

#20 is correct, but I'll try to clarify a bit more:

So 1 panel page that has 2 mini panels, both mini panels contain a form, so no nested
tags.
The panel page uses, for instance, a %node argument with a 'content' context:

Each mini panel that needs the node ID for the form, has a 'content' context and a relationship from the loaded content to a node edit form:

Now I have a node/%node/mytab panel where a portion of the node edit form gets loaded in a mini panel, and other (ajax) forms get loaded in mini panels. This works like a charm.
I discovered this thread after getting "Undefined index: #ajax in ajax_form_callback()" errors when embedding my ajax form in a 'node-edit-panel-page-form'.
Hope this helps.

Hi boris sondagh,

Could you confirm that your mini-panel for the node edit form does not cause form nesting in the SOURCE CODE as I mentioned in #25 (web inspectors repair the HTML layout so you won't see it). Or maybe a validation service such as http://validator.w3.org/. Note that the issue I have isn't with functionality - like I mentioned Firefox will ignore a nested form starting tag and render normally - but having illegal nested form tags is obviously not ideal.

Like I said before, I use a Panopoly distro, so I don't know if that's the reason. I should start a clean install of Drupal to check but I've been busy (working around minor Drupal bugs more so than producing websites lately).

Hi cmonnow, yes I can confirm that. BUT, if you add a context 'Node add - type' or 'Node edit - ID' to the panel page, instead of 'Content: ID', panels will add a form tag around the entire panel page, regardless of the mini-panels.
Panopoly should make no difference. The only panel-page that won't work is the default node add/edit override, that ships with panels. As this has the 'Node add / edit' as a hardcoded context.

Thanks for clarifying Boris. Unfortunately I don't think there's a "node add form" relationship (as opposed to "node edit form from node" relationship, so the mini-panel workaround may not be useable in my case). Also, I didn't have "content" as a "required context" option in mini-panels, but I used "node" instead. Hopefully I'm just doing something wrong.

As I mentioned previously, while I understand the principle of hard-coding a surrounding form element when a "node add form" context is selected in panels/mini-panels, in practice it always creates a nested form element structure even when the individual components of a node add form are added to a minipanel and the minipanel is added to panel without a "node add form" context. Hence why it appears to be a bug and not a feature as stated by merlinofchaos in #8.

Just to clarify in answer to the topic in general "Cannot use multiple forms in the same panel". This is, as Merlin said, a feature. It can be done but you need to:
A. have all the forms in mini-panels
And
B. not have a Node edit context loaded on the 'wrapper' panel page.

The reason why it only works in this matter has been explained in #8.
So I'm closing this and changing to support request.

Cmonnow, In regard to your more specific support question. My screens in #27 related, as I said, to #20 where the use case was a node edit form.
I believe, please correct me if I'm wrong, your asking "how do I create a node add form in a mini panel without form nesting?". The answer to that is:
First, add a context (not required context) called "Node add form" to the mini panel and choose the content type for which you want to create the node add form, and then add the form components.
Second, do not have a Node edit context loaded on the 'wrapper' panel page. For this you don't need any context loaded on the 'wrapper' panel page.
And lastly, as I mentioned in #29, the only panel-page that won't work is the default node add/edit override panel (admin/structure/pages/edit/node_edit), that ships with panels, as it already loads a context that places a form wrapper around the entire panel page.

Hi boris,

Thanks for the reply.

Your instructions are exactly what I've been doing all along. As you mentioned, I avoid adding the node add(/edit) contexts to the "wrapper" panel, in fact I load no contexts in that wrapper panel at all. In fact, I understand that this step in the mini-panel:

"add a context (not required context) called "Node add form" to the mini panel and choose the content type for which you want to create the node add form, and then add the form components."

behaves exactly as what would happen with a plain-ol' panel - it turns the whole mini-panel into a form. The problem I'm seeing is that this form element is ALWAYS doubled up - i.e. instead of
<form><fieldset>
the source code will show
<form><fieldset><form><fieldset>

Here's a direct extract in Firefox when I right click and select View Page Source. The second form element is highlighted completely in red by Firefox.

<form class="node-form node-test" action="/mywebsite/testonly" method="post" id="test" accept-charset="UTF-8"><fieldset>
<form class="node-form node-test" action="/mywebsite/testonly" method="post" id="test" accept-charset="UTF-8"><fieldset>

The form ends with:
</fieldset></form></fieldset></form>

where both

terminating elements showing red in Firefox (Linux Ubuntu v27.01).

Did you check the source code in Firefox?

I've tried different node add forms with completely different field elements and the result is always the same. If your source code (NOT using Firebug, nor Inspect Element etc) says otherwise with your exact instructions then it might be some other problem on my end.

Cheers

For this test, created 2 mini panels, both added the node add context to a different content type. Both have the node title and form buttons as elements. Created a 2 column panel and added the mini panels:

Here's my source code:

As I said, the source code is as it should be,
tags get closed within the mini panel, so no nesting.

Hi boris,

Yep, that's the method I use.

However, to replicate what I'm seeing you have to right-click in Chrome and select "View Page Source" (to view code received from the server) and not "Inspect Element" (which shows the DOM after browser manipulations and repairs). For reference, you can check out this question on StackOverflow http://stackoverflow.com/questions/18967324/difference-between-source-code-and-inspect-element?rq=1.

Cheers

Ok, if you really want, I'm happy to pm you the entire almost 400 lines of HTML as 'proof', if that helps you in any way.
But take it from me, I've looked in the source code and it's fine, I've tested this, so did other people who commented here and in other issues, it works fine this way. I tried to replicate your source code, and I can only do so by adding a context to the 'wrapper' panel page.
If it doesn't work for you, then the best thing to do, I think, is to either create a new issue as a support request, where you post everything (maybe even an export of your panels) and if needed a list of enabled modules. Or get some help on IRC (I have the same name there).
As far as this topic goes, I get the feeling this is going off topic and there is no bug as far as I can see.

Ok I stand corrected, sorry. I did found out how to duplicate this problem. I've found that it happens on sites with panels 3.3 but not on 3.4
I did some extra testing on other sites and found this problem already with just 1 mini panel. Once I updated that site to 3.4 the nesting went away. So I guess the issue can remain closed?
Please note that the problem as described by cmonnow is a little different then the original issue. The orginal issue states a problem of multiple forms getting nested in a panel page. This can be solved by using mini panels.
The problem cmonnow raises is that a form in a mini panel (in 3.3) has the same
tag twice nested in itself. This seems solvable (to be confirmed) by upgrading to 3.4
I've only done a quick test, if the second problem not solved by upgrading, then I think this should be a new issue on it's own.

Thanks for all the testing Boris. If it works in the new version I wonder which patch fixed it?

It's good it wasn't just my Panopoly distro or other modules but now I understand why developers give up on distros nonetheless.

My suggestion is:

0- Block the access to edit page for that specific node type.
1- Make your own panel in the "Pages" with your own custom path , including the node ID
2- Create your custom blocks for each form (use Form API for form design)
3- Use entity wrapper for updates and edits is the custom block codes

- Of course it needs coding! but it works nicely!

Enjoy it!

How to save one of the forms with AJAX, so I can go on and saving the other without a page reload?

What I am trying to do is exactly what Inline Entity Form provides, but that doesn't work with Profile2...

Example: I have a registered user
He will create a "Wedding" node
He creates his "Spouse" profile inside the Wedding node he is creating

Guys, just adding my two cents here... I'm working on a project that uses several node edit forms in the same panel using URL arguments to figure out which node to load. I managed to have the forms rendered, albeit incorrectly, which completely messes up the submission process.

The nested forms issue seem to be gone, one form is rendered but only the last node edit form is processed, the other forms are ignored. In fact they're completely absent from the $form_state variable, they get rendered but are ignored afterwards.

I know this issue is closed as of now, but I really feel this does not "work as designed". If I have the option to add multiple edit forms, or add forms, to a Panel, it should work accordingly. I'm taking a look at ctools_context_create_node_edit_form() to see if it's an error with the way the forms are loaded, but I've only started.

Does anyone have progressed on this issue? I really need to leverage the Panel layout and its customizing interface, so I'm kinda stuck here. I'll try looking into it but I was wondering if someone have any additional input apart from the discution above.

Thank you!

Well, i'm having issues with this same problem.

I have roughly the following structure (using 'tag like' to help explain the problem):

[top panel] Node add form[/top panel]
[bottom panel] a view listing the nodes with each comment thread and it's corresponding add comment form [/bottom panel]

Now, for some reason, the
tag is rendered outside the whole structure, containing both the node add form and the comments threads's forms, creating a big mess.
On top of this sits browser media plus, that when adding a new element to a multi value media field via ajax, recieves that totally messed form with multiple form_build_id 's (one from each node's comment thread's form) and breaks everything.
I think that each panel form should be rendered separately, ajax forms will always be very messed up if it doesn't.

Best regards!