Forums

Hi,

I've been spending the last couple of days reviewing the functions available in ChronoForms v5 and I must say that this component
looks as though you can do absolutely anything with it. Brilliant!

Well done to Max & Bob for creating & supporting such a great product!

Anyways, I have ben trying to create a standard multi page form with Previous & Next Buttons. I have found lots of posts and issues surrounding this, but was unable to find a solution that worked.

Issues I found with Java scripts, fields, multipages resetting the page 1 data, etc, etc.

Finally, I have managed to produce a Chrono Forms V5 Multipage Form with this functionality.

Rather than explain how I did this, I have taken the multipage demo form and made all the adjustments and have uploaded the new version to this post.

I hope someone finds this helpful - it would have saved me about 8 hours work 😀 !!

Cheers, Paddy

Hey, thanks for the sample, great Idea🙂
I just managed to create one without Ajax, it's similar but the previous buttons have links to the previous page.
The worst to understand was how to go back and not lose anything, but it's possible🙂

I would leave an example here, but mine is very complex and I don't have time to simplify, anyway, thanks🙂

Thank you for the example about the multi-page in CF5 it helped me a lot!

Perhaps you can at least share the "tric".

Hi Tjerk,

I don't know exactly what miguelmpn did but the basic methods are to use the Multi-Page (or Data to Session and Session to Data)* actions to handle the data.

Moving back and forward is easiest done with buttons that redirect to the specific form event (don't use the JavaScript history or back methods).

Bob

* The Multi-Page action is a wrapper for the Data to Session and Session to Data actions - the individual actions have some additional settings that can be helpful. In particular you can choose whether the new data from the form is used, or the saved data from the session. When editing the data you usually want the new data to over-write the saved data.

Hi Bob,

Thanks for your comments, obviously the proposed method isn't preferred. I will check if I understand how it works in your proposal. Perhaps it's an idea to create a how-to and a demo form for CF5 as it works signifficantly different to pervious versions as far as I understand from al to posts in the forum.

Tjerk

Hi Tjerk,

Please check the demo-multipage for the basic setup.

Bob

Hi Bob,

Once again thanks for your valuable input, I've created a multipage form with submit and back buttons. It now works without Java!

What did I do?
I've taken the multi page_demo.
Added a Back button, settings of the Back button are:
Type: submit
Extra params: onclick=history.back();

Setings in the the setup are the same as in the demo!

For others: Pleasse note that AJAX is switched of in the "HTML (render form)"

Hi TjerkH!
I have done as you describe in the form of a demo multi pages: Submit type, Extra params: onclick = history.back (); Ajax set "no" on all pages. Back button works only on the second page. When I pressed her successful turn on the first page. And on the third page of the button is not working. What am i doing wrong?
Here the video:
http://recordit.co/Sx4lwGLbqi

Hi Dimitry,

The good new is: I can replicate your problem!
The bad news is: I've just one previous button in use (on page 2).
My third page is a "goodbeye" page which is rendered in the on submit event by using the display message action.
Most of my knowledge I found in the forum I'm really new to coding.
Reading carefully what Bobs states above you might find a solution for the button on page 3 by stating onclick = page2; but I haven't tested this. Perhaps Bob can enlight us on this

So sorry I can't help you any further,

Tjerk

Thank you for your response. I am also new to coding.😀

Hi Dimitry,

As I said earlier I suggest you don't use the JavaScript history.back() but instead add a link to the button that goes to the specific form event that you need. In fact I'd go further and add hidden menu items for each page and have the buttons link to them - that avoids problems with the Joomla! SEF altering URLs so that they break.

Bob

Thanks for the advice, Bob! I will try...

Hi Bob and Dimitry,

I would be looking forward to the "perfect" solution.... In fact the "on click" function was something I found in another post from Bob so I thought this was correct 😀 > But opinions and insights can change, so no back to the bread and butter...

@Bob do you mean a hidden menu item in Joomla itself so every page is a different form?
Would you be so kind to give some clues how to do this......

For both method one and method two?

I know how to create an event, but how to link to it with a button?......
Your help would be appreciated.

Tjerk

Hi,

There's nothing wrong with the On Click method - I would just set a specific URL rather than use history - that way you keep control over where the redirection is going to.

A 'hidden' menu is a Menu item in a Menu that is not assigned to a module and so isn't' visible anywhere on the site. You can use these to create URLs that look tidy and - most importantly - do not get broken by the Joomla! SEF. For a ChronoForm add a menu item of Type ChronoForm, add the form name and the event (page) in the Options tab. Then set the alias to something unique e.g. myform-page2

When that is done you can set a JavaScript onClick event to myform-page2

Bob

Aha I think I'll understand what you mean. Once it works I will get back with a noob explenation! Not for Bob, but perhaps for others......

Hi Bob!
I'm sorry. I do not know much English.
I did not understand what you mean.
If I understand correctly, you suggest to make the menu on every page of the buttons containing links to each page. Will the link button to remember the story?

Hi Bob

I am have used the above and parts of a previous multipage form to create one that has a previous button.

Its mostly working except for 1 page in the middle that goes forward instead of the previous page. I have gone over it a few times but can seem to pinpoint the issue. I think it may have to do with duplicate info being brought across from one page to another.
Going back from Page 2 -1 & page 4 -3 work fine but going back from page 3 -2 takes you to page 4 (goes forward)
I have attached screenshots of my setup and below is the JS code added on load...

jQuery(document).ready(function($){
    $(document).on('click', '#id-previous', function(){
        $.ajax({
            "type" : "POST",
            "url" : $("#id-hidden-url").val(),
            "success" : function(res){
                $("#chronoform-Brewers").replaceWith(res);
            }
        });
    });
});
jQuery(document).ready(function($){
    $(document).on('click', '#id-previous2', function(){
        $.ajax({
            "type" : "POST",
            "url" : $("#id-hidden-url2").val(),
            "success" : function(res){
                $("#chronoform-Brewers").replaceWith(res);
            }
        });
    });
});
jQuery(document).ready(function($){
    $(document).on('click', '#id-previous3', function(){
        $.ajax({
            "type" : "POST",
            "url" : $("#id-hidden-url3").val(),
            "success" : function(res){
                $("#chronoform-Brewers").replaceWith(res);
            }
        });
    });
});

It might be easier to give you access to it as its pretty big. Can I send you a PM?

Thanks

Hi,

The easy way to have a back button is by using a link to the previous page, and give that link the class "btn".

Best regards,
Max

Ok so I have removed the javascript previous and have now added back buttons as suggested in a multifield with the submit button.

This is the back button code
Its sort of working, the previous page loads with info filled out, but it is stripping out the css and template?
Any ideas why?

Hi antigeek,

That is what adding &tvout=ajax is intended to do, it is used when making an Ajax call to the server for extra data so that you only get the data and not the site template as well.

Bob

Hi antigeek,

You should not use the &tvout=ajax in the link, you just need the &event=event_name

Best regards,
Max