dimanche 1 mars 2015

Bootstrap tabs containing different forms

I have 2 bootstrap tabs in my html page, each containing different forms. Form Action has been specified to the same jsp page.


When I am submitting a form from 2nd tab, the whole page is getting reloaded, and page sets 1st tab active as it is set by default.


What can I do to avoid this? When I submit form from 2nd tab, I want the same page but the second tab active as it should be.





<div class="container">
<ul class="nav nav-tabs" id=passengerTabs>
<li role="presentation" class="active"><a data-toggle="tab"
href="#searchbyflight">Search By Flight Number</a></li>
<li role="presentation"><a data-toggle="tab"
href="#searchbypassenger">Search By Customer Name</a></li>
</ul>
<div class="tab-content">
<div class="container tab-pane fade in active" id="searchbyflight">
<form class="form-inline" method="get" action="PassengerDetails.jsp">
<div class="form-group">
<input type="text" class="form-control" id="textFlightNumber"
name="textFlightNumber">
</div>
<button type="submit" class="btn btn-primary"
id="searchflightnumber">Search Customers</button>
</form>
</div>

<div class="container tab-pane fade in" id="searchbypassenger">
<form class="form-inline" method="get" action="">
<div class="form-group">
<input
type="text" class="form-control" id="textCustomerName"
name="textCustomerName">
</div>
<button type="submit" class="btn btn-primary"
id="searchCustomerName">Search Customers</button>
</form>
<br>
</div>
</div>
</div>



Aucun commentaire:

Enregistrer un commentaire