Changing the tab should submit the form
We have a 6 step form wizard where we ask user to input some valid data and complete all the 6 steps which works fine. But the problem is, if user wants to change some data which he already entered in one of the steps. For that he needs to run the wizard which is not user friendly.
Now we have decided to use the Jquery Tabs where user can just click on the tab and change the values. I have added the tab code in one of the header file
<div id="main" class="main">
<div id="tabs">
<ul>
<li style="font-size: 12px;"><a href="#tabs-1">Select Service</a></li>
<li style="font-size: 12px;"><a href="<s:url action='account'></s:url>" >Configure AWS account</a></li>
<li style="font-size: 12px;"><a href="<s:url action='asset'></s:url>">Asset Classification</a></li>
<li style="font-size: 12px;"><a href="<s:url action='instance'></s:url>">Asset Configuration</a></li>
<li style="font-size: 12px;"><a href="<s:url action='key'></s:url>">Configure Deployment Type</a></li>
</ul>
</div>
Now I can see the all the tab but when I click on any tab I am always getting the first tab or previously selected tab.
How can I submit the form when user change the tab. for e.g.
If user navigated to the "Asset Configuration" tab and changed the values and clicked on "Configure Deployment Type" next tab. Then it should load the new form and save the changed values.