Forums

Hi All,

I am using 3 tabs in my form. I made it with a tutorial and the demoform and it looks fine. Because it is a big form with many fields this was the best sollution (it is a form to register yourself (Person) your car (Mustang) and the rental procedure (Rental)
so it is a container with 3 cointainers. the last one is with a submit button.

I want the first two tabs (TAb Person and tab Mustang) with a navigation (3th is also fine), so the user can go to the next tab.
I found this tutorial: http://www.chronoengine.com/faqs/58-cfv4/cfv4-elements-and-html/2660-how-can-i-build-a-tabbed-form.html
so i:
- add the line to the file (on tabs.js, also line 66)
- (had the container with 3 containers) added the custom fields with the tab code and new values (also tested it in demo)
- add the Load javascript before the HTML on setup

but it does not work. not with my form and not with the chronoforms demoform. maybe because i have v5? Here is a link to the form without the buttons: http://test3.mustang-rijden.nl/index.php/contact/mustang-aanmelden

can somebody hand me a sollution to have a 'next' button to my tabbed form?

hope to hear something!

Please use the following code in a "Load JS" action in the "on load" event, you will have to replace the different ids in the code:

jQuery(document).ready(function($){
	$('#button_id').on('click', function(){
		$('#tabs_container_id').find('ul.nav').gtabs('get').show($('a[href="#tab_container_id"]'));
	});
});

Regards,
Max

Hi Max
i have tried this code in tabbed-form-demo but it doesn't work
[attachment=0]Captura.JPG[/attachment]

jQuery(document).ready(function($){
 $('#button1').on('click', function(){
  $('#chronoform-container-1').find('ul.nav').gtabs('get').show($('a[href="#chronoform-container-3"]'));
 });
});

also i tried workaround with linked text

<a href="#chronoform-container-2" data-toggle="tab">back</a>

( data-g-toggle didn't work)
but the form toggles collapsed
[attachment=1]Captura2.JPG[/attachment]
Let me know if i am missing something