Search code examples
jqueryformsjquery-toolsjquery-tabs

jQuery tools tabs + form

I have a form that I have over 4 divisions split by 4 tabs pulled together by jQuery tools.

The whole division is included with in form elements but the only tab that sends through is the last tab where the submit button is.

Am I missing something in terms of carrying across information from the other divisions?

Solution

  • Since you are asking a hypothetical, versus an actual issue to troubleshoot, here's (roughly) what your code should look like:

    <form>
    <ul class="tabs">
         <li>Tab 1</li>
         <li>Tab 2</li>
         <li>Tab 3</li>
         <li>Tab 4</li>
    </ul>
    <div class="panes">
        <div id="first"> FIRST SECTION OF FORM </div>
        <div id="second"> SECOND SECTION OF FORM </div>
        <div id="third"> THIRD SECTION OF FORM </div>
        <div> FOURTH SECTION OF FORM, WITH SUBMIT BUTTON </div>
    </div>
</form>

    Maybe you aren't closing your panes correctly?

    (by the way, I added id attributes to the panes so you could add links/buttons to continue to the next part of the form from within the panes themselves. Just link to #first, #second, #third where appropriate)