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
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
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
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
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
This topic is locked and no more replies can be posted.