BAck button for multi page forms.

Is there any way to create a back button for multi-page forms. I can add another submit button but when you press the button it just goes to the next page with the HTML(Render form) code in the setup section of the form.

Basically I am wanting to create two buttons at the bottom of a form page, one to go back to the previous page and the second to continue to the next page. This would also be handy to create a verification page at the end of the form to verify that all information submitted to the form is correct before it is submitted. If it is not then can click on a button and go back to the page and correct it.

Any help would be much appreciated. Thank you for such a great product as is.

-Gorf

Hi Gorf,

I did this recently using a link formatted to look like a button that re-loaded the previous form step.

Bob

how is this done if im using ajax to submit the form on each step?

You can add a link too, but that page switch would not be in AJAX, that's the easy way!

Or you can assign a click event to the button and use the same AJAX code generated by CF, you will have to do some changes though, add the link to the page to load in a data attribute at the button, then use it to load that page!

Here you are:

jQuery(document).ready(function($){
	$("#BUTTON_ID").on("click", function(){
		$.ajax({
			"type" : "POST",
			"url" : $("#BUTTON_ID").data("page_url"),
			"success" : function(res){
				$("#FORM_ID").replaceWith(res);
			},
		});
	});
});

Your button link (or button) must have this attribute:

data-page_url="link to page here"

hmmm maybe im missing something I cant get this to work at all ... the button doesnt do anything...

this is what I have

jQuery(document).ready(function($){
 $("#back1").on("click", function(){
  $.ajax({
   "type" : "POST",
   "url" : $("#back1").data("/start&event=load"),
   "success" : function(res){
    $("#chronoform-start").replaceWith(res);
   },
  });
 });
});

Your data param name is wrong! I have another idea, just add a hidden field to every page, and set its value to the url of the previous page, give this hidden field the same id in all pages, and change the "url" line in your code to this:

"url" : $("#HIDDEN_ID").val(),

Please pay attention to your button id as well, it should be the same in all pages if you have a back button in all of them!

ok thank you i will try this out...

ok so my back button id is set to "back1" and my hidden id is set to "hidden" , when i click the back button, it seams as if nothing is happening to it...

I got a couple peoplee trying to help but no luck on this ... here is the code i got so far

jQuery(document).ready(function($){
    $(document).on('click', '#BUTTON_ID', function(){
        $.ajax({
            "type" : "POST",
            "url" : $("#HIDDEN_ID").val(),
            "success" : function(res){
                $("#chronoform-start").replaceWith(res);
            }
        });
    });
});

that's the code which should work after you replace the button id and the hidden field id, and your hidden field must contain the url to the previous page (or any page to load), I forgot something though, the url must end with "&tvout=ajax"

jQuery(document).ready(function($){
 $("#BUTTON_ID").on("click", function(){
  $.ajax({
   "type" : "POST",
   "url" : $("#HIDDEN_ID").val(),
   "success" : function(res){
    $("#chronoform-start").replaceWith(res);
   },
  });
 });
});

I named the hidden field HIDDEN_ID and button BUTTON_ID just to make sure i didnt miss anything.... still scratching my head on this one.

That should be the "field id", not the "field name", are you sure you made that correctly ?

Please send me a link to the form so I can check it if so, you can do that in PM or email!

I set it as name and ID ... sent you the link through PM

You still have the old code loaded on your page, you don't have the new one with this line:

"url" : $("#HIDDEN_ID").val(),

Please make sure that you use the latest code I have posted, paste it inside a "load javascript" action at the "on load" event

Sorry i did do that you must have looked at it while I was trying to retrace my steps...

Please copy the code in my latest post there, you still have some differences like this line:

$(document).on('click', '#BUTTON_ID', function(){

ok im think there is a bug somewhere ... I just sent you a link to where this at ...
whenever I add this to the end of my URL "&event=submit" and I click the back button ... it works! and if I keep clicking submit it will actually trigger the hidden field and redirect me to the " tvout " url you provided, but its only the form nothing else....

Hello!

I am trying to add back buttons into my multipages Joomla registration form. I have added JS for it.

jQuery(document).ready(function($){
    $(document).on('click', '#BUTTON_ID', function(){
        $.ajax({
            "type" : "POST",
            "url" : $("#HIDDEN_ID").val(),
            "success" : function(res){
                $("#chronoform-start").replaceWith(res);
            }
        });
    });
});

I have added 'button' back on the form too.

However, there are some problems occur:

1. The site is written;
2. Validation functions of some items are neglected;

I have used the contact form to send the url and the details of those problem for your reference. Really appreciated for your hard work on creating this great extension!

Ok, few fixes were needed to the code and to the html action, the code below should work fine, but please send me a message using the contact us page to get the new html patch

jQuery(document).ready(function($){
    $(document).on('click', '#BUTTON_ID', function(){
        $.ajax({
            "type" : "POST",
            "url" : $("#HIDDEN_ID").val(),
            "success" : function(res){
                $("#chronoform-start").replaceWith(res);
            }
        });
    });
});

Update: all hidden fields which have the urls will need to have the line below in the "Extra params" box:

alt=ghost

Hi Max,

I sent a message yesterday through the contact us, pleade check it, thanks!

It did not work? I tried to write the code into my multipage form, but nothing happened after clicking the back-button. It would be helpful to have a demo form with the back button.

Hi dgruhn,

it worked, please make sure that you have a hidden field with the previous page url, and make sure its available in all pages!

Regards,
Max

The back-button type is submit or button?

Hi dgruhn,

Just a button as far as I can see.

Bob

Max

I have a developer implemented a jQuery/livequery-based solution for the back button. He insisted that Chornoform's architecture does not permit each page to to preserve its states. As a result, as a user traverses back and forth through pages, every bit of data that he's entered will be lost… I would think the states can be preserved with JS somehow… Any suggestions on how to tackle this issue?

regards,
SH

Hi studiocardo,

The simple answer is to get a different developer. Though in fairness I have no idea what jQuery/livequery is.

You can certainly preserve all of the users data using the Multi-Page actions if the form is submitted conventionally when you move between pages. That might not work if you are using Ajax submission?

Bob

PS I found a jQuery/livequery page here - but I still don't know what it does for your form :-(

Hi guys🙂 Happy new year !

I tried to applied the solution provided by Max. The button works as it displays the previous page. However, all my previous page javascript, dynamic dropdown and validations codes don't work anymore.

Anything I miss?

Thank you for your help🙂

Hi Goyens,

Have you got multi-page actions on both page events?

Bob

Hi GreyHead,

Multi-pages actions are defined on every page.

When I click the back button, the first page appears but fields events and validations are not working anymore.

I tried to include the following lines in the AJAX Success fucntion but I got an error " Uncaught ReferenceError: chronoforms_fields_events is not defined"

			$("#chronoform-Booking_Book_English").gvalidate();
				chronoforms_fields_events();
				chronoforms_validation_signs($("#chronoform-Booking_Book_English"));
				chronoforms_data_tooltip($("#chronoform-Booking_Book_English"));
				chronoforms_data_loadstate($("#chronoform-Booking_Book_English"));

this was never solved😟