I want to activate a tab based on the length of another field using jquery
<p>I have a text field where the number length will be between 5 and 7 caracters. And a tab active while the two others are not. I am trying to activate a different tab based on the length of the text field.  </p>

<pre><code>&lt;div class="form-group"&gt;

    &lt;label class="col-md-offset-9 col-xs-1 control-label" for="NoDD"&gt;No:&lt;/label&gt;  
    &lt;div class="col-xs-2"&gt;
        &lt;input id="NoDD" name="NoDD" placeholder="droit d'accÃ¨s" class="form-control input-md" required="" type="text"&gt;          
    &lt;/div&gt;
    &lt;label class='col-md-1' for='radio'&gt;Prix&lt;/label&gt;

    &lt;ul class='nav nav-pills'&gt;
        &lt;li class="active"&gt;&lt;a data-toggle='pill' href='#annuel'&gt;Annuel&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a data-toggle='pill' href='#journalier'&gt;Journalier&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a data-toggle='pill' href='#location'&gt;Location&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

    &lt;div class='tab-content'&gt;
        &lt;div id='annuel' class='tab-pane fade in active'&gt;

            &lt;div class='col-md-offset-1 col-md-3'&gt;
                &lt;label class='radio-inline' for='radio-0'&gt;Jusqu'au 9 déc. 2014 &lt;br&gt;
                    &lt;input name='radio' id='radio-0' type='radio' value="300"&gt;300$
                &lt;/label&gt;
            &lt;/div&gt;
            &lt;div class='col-md-3'&gt;
                &lt;label class='radio-inline' for='radio-1'&gt;Après le 9 déc. 2014 &lt;br&gt;
                    &lt;input name='radio' id='radio-1' type='radio' value="360"&gt;360$
                &lt;/label&gt;
            &lt;/div&gt;
            &lt;div class='col-md-3'&gt;
                &lt;label class='radio-inline' for='radio-2'&gt;Antique 1995 et moins &lt;br&gt;
                    &lt;input name='radio' id='radio-2' type='radio' value="215"&gt;215$
                &lt;/label&gt;
            &lt;/div&gt;

        &lt;/div&gt;

        &lt;div id='journalier' class='tab-pane fade'&gt;

            &lt;div class='col-md-offset-1 col-md-3'&gt;
                &lt;label class='radio-inline' for='radio-6'&gt;1 jour &lt;br&gt;
                    &lt;input name='radio' id='radio-6' type='radio' value="60"&gt;60$
                &lt;/label&gt;
            &lt;/div&gt;
            &lt;div class='col-md-3'&gt;
                &lt;label class='radio-inline' for='radio-7'&gt;3 jours  &lt;br&gt;
                    &lt;input name='radio' id='radio-7' type='radio' value="120"&gt;120$
                &lt;/label&gt;
            &lt;/div&gt;
            &lt;div class='col-md-3'&gt;
                &lt;label class='radio-inline' for='radio-8'&gt;7 jours &lt;br&gt;
                    &lt;input name='radio' id='radio-8' type='radio' value="200" &gt;200$
                &lt;/label&gt;
            &lt;/div&gt;

        &lt;/div&gt;

        &lt;div id='location' class='tab-pane fade'&gt;

            &lt;div class='col-md-offset-2 col-md-3'&gt;
                &lt;label class='radio-inline' for='radio-9'&gt;Location &lt;br&gt;
                    &lt;input name='radio' id='radio-9' type='radio' value="560"&gt;560$
                &lt;/label&gt;
            &lt;/div&gt;
            &lt;div class='col-md-3'&gt;
                &lt;label class='radio-inline' for='radio-10'&gt;Remplacement  &lt;br&gt;
                    &lt;input name='radio' id='radio-10' type='radio' value="20"&gt;20$
                &lt;/label&gt;
            &lt;/div&gt;

        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;script&gt;
$( document ).ready(function() {
    $("#NoDD").on("input", function() {

        var quantity = $(this).val().length;

        if (quantity == 7) {
            $("ul li").hide().eq(0).addClass("active").show();     
            $(".tab-pane").removeClass("in active");
            $("#annuel").addClass(" in active");
        }
        else if (quantity == 6) {
            $("ul li").hide().eq(1).addClass("active").show();     
            $(".tab-pane").removeClass("in active");
            $("#journalier").addClass(" in active");
        }
        else if (quantity == 5) {
            $("ul li").hide().eq(2).addClass("active").show();     
            $(".tab-pane").removeClass("in active");
            $("#location").addClass(" in active");
        }
    }); 
});     
&lt;/script&gt;
</code></pre>