CODEWITHSUNDEEP
javascriptjquery
Arnab
Arnab

Reputation: 2354

Reset text fields in form fieldset on bootstrap tab press

This question is in context to this..

Html code :

<ul class="nav nav-tabs">
    <li class="active"><a href="#a" data-toggle="tab">A</a>
    </li>
    <li><a href="#b" data-toggle="tab">B</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="a">
        <form id="form1" class="form">
            <fieldset id="abc">
                <input type="text" name="a">
                <input type="text" name="b">
            </fieldset>
            <fieldset id="xyz">
                <input type="text" name="x">
                <input type="text" name="y">
                <input type="text" name="z">
            </fieldset>
        </form>
    </div>
    <div class="tab-pane" id="b"></div>
</div>

Javascript code: 

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
               $("#xyz > input").val("");
            });

This does not work even though something similar does work on button press..

Demo

any help is sincerely appreciated

Thanks

Upvotes: 0

Views: 1549

Answers (2)

Kayoti
Kayoti

Reputation: 49

This will find all inputs within a specific fieldset via fieldset id attribute it will traverse all input fields inside a div or outside and clear them all when you toggle.

 $('a[data-toggle="tabs"]').on('shown.bs.tab', function (e) {
        $("#fieldset_ID").find(':input').each(function() {
            $(this).val('');
        });
    });

Upvotes: 0

dreyescat
dreyescat

Reputation: 13818

You need to register the shown.bs.tab event handler once the DOM is ready:

$(function () {
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $("#xyz > input").val("");
  });      
});

Otherwise the on is trying to bind a handler to an empty list of elements.

Demo

Upvotes: 1

Related Questions