How To Use Forms In A Modal Iframe

The easiest way that I have found is to use an iframe in the modal body. It is possible to create a form in the modal without an iframe, but that does present a whole set of problems with form tokens, upload tokens etc. You don’t get these problems when using an iframe as the tokens and upload js are already in the iframe document head.

You need to alter your form function to output a form suitable for this - no header or footer for example. Jamroom provides some easy functions to help with that, which makes it incredibly simple to alter your forms to work within an iframe (and you don't even need a modal for that, your iframe could be within the main body of your page).

If you are using a normal Jamroom modal the basics for a modal are summarised here: https://www.jamroom.net/ultrajam/documentation/code/1120/how-to-use-a-modal-in-a-template

First thing will be to get rid of the site header and footer, you probably don't need those appearing in your iframe window.

 jrCore_page_set_meta_header_only(); 

The form output will be the only thing in the page, and the form token, upload tokens will be in the header. Everything (nearly everything) will "just work".

You can still use jrCore_page_display() to return the form, but will want to output html - easy, just add the true parameter:

return jrCore_page_display(true);

Also in your form function, you might want to adjust the css to suit the iframe. For example remove the 40px padding on the body element:

    $_css_embed = "body { padding-bottom:0; }";
    jrCore_create_page_element('css_embed',array($_css_embed));

And maybe add some javascript if you want to size your modal to the form etc. Exactly how depends on your system, which modal you are using, etc. You might also want to remove the page banner, and maybe hide the form buttons (if your modal has its own buttons). I hide them and then use jquery click() in my modal buttons to trigger form submit. It's the easiest way of doing it as we don't get much access to the form buttons, even when overriding that particular Core template.

I've been using https://github.com/davidjbradshaw/iframe-resizer lately, and so far so good. I chose that one because it handles content resizing (which happens when the success message is received) and also because it handles cross-domain iframe content (which could be handy, although you need to get the script into both the content page and the parent). Read more about it here:
http://davidjbradshaw.github.io/iframe-resizer/

There are a few things you will want to do in the form save function as well, for example, use jrCore_set_form_notice for any errors:

        jrCore_set_form_notice('error', 'An error was encountered creating the new scrollpage - please try again');
        jrCore_form_result("referrer");

jrCore_set_form_notice has a very useful third parameter. By default html and other tags are stripped from the form notice, but set that third parameter to false, and the tags won’t be stripped. This allows you to send some javascript back with your success notice.

This would cause the parent page to reload when the success notice appears:

    // reload iframe parent page

    jrCore_set_form_notice('success', 'your item has been saved! <script>window.parent.location.reload();</script>', false);
    jrCore_form_result("referrer");

Reloading the parent window is a pretty simple thing to do. If you want to add some delay (time to read the success notice), animate your modal, reload divs on the page to reflect the form save, or similar, you could call a function in the parent window from here.