[SOLVED] Formbuilder: force inline mode in a div

[Mich-adg]

Hi,

i need to call a form created with formbuilder inside a div. This div is called with jQuery with a function:

Code: Select all

   $('.loadPage').click(function(event){
        $("#disPage").slideUp("fast");
        dest = $(this).attr('id');
        $("#disPage").load("index.php?page="+dest, function() {
           $("#disPage").slideDown("slow");
        });
        event.preventDefault();
   });

The form loads perfectly in the destination div, but the problem is, when i submit it, the whole page is replaced by a blank new template with the form result messages! Formbuilder "inline" option is checked in admin, and the submit action is supposed to display a summary of the sent form, but it doesn't display in the original div!

So i need a tip to display the results in the div itself, not in a blank new page. Any help is welcome, thanks !!

[JohnnyB]

1) create a new 'blank' template with just {content} in it.

2) create a new "confirmation" page with the message that you want to show after a form is submitted. Assign it to this new template.

3) Use the option in FB that allows you to load a page (choose your new page from #2) upon form submit instead of the confirmation message baked into the FB module.

That will generate a page that just has the message - no CSS, minimal HTML, no Doctype, etc.....

[Mich-adg]

Hi JohnnyB, thanks for your reply, i tested it but no success, same problem. The new page of validation message is called but replace the global page, not the div content wich displays the form.


More details of how i display the pages:

The global page (with a nav menu) has a classic template. When i click a menu item, i call my jQuery function, that load a new page called "myform" (wich has a new template - just content and css stylesheet) INSIDE a div in the global page. So, the form page displays well inside this div, but when i submit, the global page is replaced by "myform".

I thinked the inline method of FB will just replace the div's content but apparently not!

[velden]

You probably need to use ajax to submit the form and retrieve the result.

https://www.cmscanbesimple.org/blog/for ... modal-view might be useful to read. It's not exact the same what you want but it has some ajax implemented on FormBuilder form.

[Mich-adg]

Thanks for this tip, i used it on another website a few months ago, it works well but i was searching another way to integrate FB. Perhaps must i use it again if there's no alternative...

[velden]

You realize that the '.load' function you use is ajax too?

[Mich-adg]

Thanks Velden, it was easier as i could imagine with your script !

I put this in the global template :

Code: Select all

function prepareForm() {

  $('form.cms_form').on( "submit", function( event ) {
    event.preventDefault();
    var posturl = $(this).attr("action") + "?showtemplate=false";  
    var postdata = $(this).serialize();
    var frm_container = $("#affPage");
    /* ajax */
    $.post(posturl,postdata,function(data) {
      /* overwrite form's parent div with new html and prepare form again */
      frm_container.html(data);
      prepareForm(); } );
      } );

}

and in the div's page template :

Code: Select all

<__script__ type="text/javascript">
   prepareForm(); 
</__script>

and voilà, the form loads in it's "div"