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