CODEWITHSUNDEEP
jquerytwitter-bootstraptabs
adam78
adam78

Reputation: 10068

How to clear all form input fields when clicking on a bootstrap tab

I have the following tabbed navigation:

<div>

    <ul class="nav nav-pills" >
        <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
        <li><a href="#tasks" data-toggle="tab">Tasks</a></li>
        <li><a href="#messages" data-toggle="tab">Messages</a></li>
   </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="home">...</div>
    <div class="tab-pane" id="tasks">
        <div class="form-group">
             <input type="text" id="search1" value="" class="form-control input-lg">
        </div>
        ....
    </div>
    <div class="tab-pane" id="messages">
        <div class="form-group">
             <input type="text" id="search2" value="" class="form-control input-lg">
        </div>
        ....
    </div>
 </div>

I'm using the following code to clear all input fields when I click on a pill. However when I click on the current pill the input field doesn't clear? Example if I'm on the tasks pane and I click the tasks pill the following event doesn't seem to fire to cause all input fields to clear. They only clear when I cycle through the different pills.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
   $('.form-group input[type="text"]').val('');
});

How can I clear all input fields including when I click the current tab/pill

Upvotes: 0

Views: 3732

Answers (1)

Diptox
Diptox

Reputation: 1809

change the event to "click"

$('a[data-toggle="tab"]').on('click', function (e) {
   $('.form-group input[type="text"]').val('');
});

Upvotes: 3

Related Questions