Forms inside Bootstrap tabs don't work / submit

Question

I ran into a simple problem, but just don't know how to solve it. I use twitter bootstrap bookmarks. Bookmarks work, but forms within each tab are not submitted. Forms are submitted when used without tabs.

Below are the links I used for tabs

<ul class="nav nav-list affix tabs" data-tabs="tabs"> <li> <a href="#overview" data-toggle="tab">Overview</a> </li> <li> <a href="#profile" data-toggle="tab">Profile</a> </li> </ul> 

And then comes the tabs

  <div class="tab-content span9"> <div id="overview" class="tab-pane" data-toggle="tab"> <!-- Overview Forms go here --> </div> </div> <div class="tab-content span9"> <div id="profile" class="tab-pane" data-toggle="tab"> <!-- Profile Form go here --> </div> </div> 

Finally, I added the following jquery

  $('.tabs').tab(); $('.tabs a[href="#profile"]').tab('show'); 

Answer 1

The same goes for loading panels, when you have a form inside the panel body and try to submit the form, nothing happens. You must remove the panel-collapse class from the body :)