Tabs Form - Next & Previous Tab Buttons

Hi,

ChronoForms v5 is looking to be an excellent product and exactly what I am looking for.

Here is my problem:

I have created a tabbed form. Clicking on the headings enables me to easily switch between the tabs and works perfectly.

I have created the from structure as follows:

tab-container
--tab-your-details
----text-first-name
----text-last-name
----button-next
--tab-your-company
----text-company-name
--button-submit

The html Code that gets generated for the tab headings is as follows:

<li class="active"><a href="#tab-your-details" data-g-toggle="tab">Your Details</a></li>
<li class=""><a href="#tab-your-company" data-g-toggle="tab">Your Company</a></li>

I have created a js event that loads 'on Load' that contains the following script:

jQuery(document).ready(function($){
$("#button-next").on("click", function(){
$("a[href='#tab-your-company']").tab("show");
});
});

This has been based upon search and reading various posts on the forum.

I can clearly see in the Source of the webpage that the Javascript is getting loaded. I can also see that there are no errors on the JavaScript Console.

However, when I click the button I have created nothing happens the first click. The second click of the button sort of selects the tab-your-company tab but the contents remain hidden as shown below:



Does anyone have any idea how I can easily create a button that when clicked replicates the function that happens when the tab headings are clicked?

Thanks in advance for your help!!!

Paddy

Hi Paddy,

I had an attempt at doing this with jQuery - I can emulate the click on the tab OK but that doesn't seem to trigger the tab change :-(

Please ask Max (the developer) using the Contact Us form above and linking to this thread. He may have a quick answer for us.

Bob

Hi Bob,

Thanks for the follow up - really appreciated!!

I will take your advice and ask Max if he can provide a quick and easy answer.

Cheers, Paddy

Hi Bob, and for anyone else looking at this post.

I've produced a working solution that can be explained and downloaded here:

http://www.chronoengine.com/component/chronoforums/posts/f2/t99978/how-to-place-next-back-buttons-on-a-multi-page-form.html

Thanks, Paddy

Hi paddywanless,

Great demo, thank you. But this particular thread was about tabbed forms, not multi-page forms.

Bob