I want to get input field value. Only based on class and id name. I am getting undefined in alert box. Not getting any value which i have entered in input box.

HTML

 <div id="tab1" class="tab-pane active">
        <div class="input-text">
            <div class="input-append">
                <input id="textData" class="input-xxlarge" type="text" name="inputName" />
                <button id="pressme" class="btn btn-success btn-large" type="button">Convert</button>
            </div>
        </div>
    </div>

JS

 $('#pressme').on({
     'click': function () {
         var data = $(".tab-pane active #textData").val();
         alert(data);

     }
 });

I want to get input field value. Only based on class and id name. I am getting undefined in alert box. Not getting any value which i have entered in input box.

HTML

 <div id="tab1" class="tab-pane active">
        <div class="input-text">
            <div class="input-append">
                <input id="textData" class="input-xxlarge" type="text" name="inputName" />
                <button id="pressme" class="btn btn-success btn-large" type="button">Convert</button>
            </div>
        </div>
    </div>

JS

 $('#pressme').on({
     'click': function () {
         var data = $(".tab-pane active #textData").val();
         alert(data);

     }
 });

• javascript
• jquery

5 Answers 5

.tab-pane active looks for an <active> element inside of an element with a class of tab-pane. The correct selector for an element with those two classes would be .tab-pane.active., but since your element has an id, just select it using an id selector:

$("#textData").val();

You can use the selector as your text box id enough

var data = $("#textData").val();

Your selector is incorrect as the div has both classes, so you need to join them together like this:

var data = $(".tab-pane.active #textData").val();

Note that id selectors should be unique, so in effect the class selector is redundant anyway.

It will be like

$('#pressme').on({
     'click': function () {
         var data = $(".tab-pane.active #textData").val();
         alert(data);
     }
});

Makesure that you have enclosed it on DOM ready

TRY THIS:

 $('#pressme').on('click',function () {
         var data = $("#textData").val();
         alert(data);

     });