Why I can't get the input value

Question

I have this table in my HTML:

<table class="dataTable" id="repaymentShedule">
                <thead>
                    <tr>
                        <th>1</th>
                        <th>2</th>
                        <th>3</th>
                        <th>4</th>
                        <th>5</th>
                        <th>6</th>
                        <th>7</th>
                        <th>8</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: creditDetails">
                    <tr>
                        <td class="paymentDate" data-bind="text: dateOfPayment"></td>
                        <td class="startBalance" data-bind="text: beginingBalance"></td>                        
                        <td class="monthlyInt" data-bind="text: monthlyInterest"></td>
                        <td class="principal"><input data-bind="value: princpalPayment"></input></td>
                        <td class="monthlyInst" data-bind="text: monthlyInstallment"></td>
                        <td class="remainingBalance" data-bind="text: endingBalance"></td>
                        <td class="paid"><input type="checkbox" data-bind="checked: isPaid, disable: isPaid, click: testFunc, value: true"></td> <!-- value: true moje da ne e nujno -->
                        <td class="currentDate" data-bind="text: currentDate"></td>
                    </tr>
                </tbody>
            </table>

The values are comming from knockout js bindings. and I'm trying to get all the values of the principal class with the function below:

updateValues = function(){
    $("tbody").find("tr").each(function() {                               
       var principal = $(this).find('td.principal').val();
       console.log(principal);
    });                           
};

Bu the console returns: (an empty string)

EDIT: The above function works without any problems on the paymentDate class only by changing the .val() to .text()

I'm pretty sure that I'm not getting the value the right way, or that the binding is not allowing me to get the current value, but I'm really not able to spot the issue

Answer 1

You need to do this:

var principal = $(this).find('td.principal :input').val();

to get the value of the input element inside the table cell with class principal .

Also, as per the .val() API Documentation :-

The .val() method is primarily used to get the values of form elements such as input, select and textarea. In the case of elements, the .val() method returns an array containing each selected option; if no option is selected, it returns null.

Hence, you are getting empty string in console while using your code.

The above function works without any problems on the paymentDate class only by changing the .val() to .text()

This also explains why you got the correct value after changing the .val() to .text() for the paymentDate table cell, as it does not have any input element inside it.

Answer 2

<td class="principal"><input data-bind="value: princpalPayment"></input></td>

You don't need a closing </input> tag, as input elements are self-closing.

And you just need to target better.

var principal = $(this).find('td.principal input').val();

Answer 3

If you're using KnockoutJS you probably don't need to use jQuery at all . Get the correct value from your ViewModel, something like this:

updateValues = function() {

    var details = MyMainViewModel.creditDetails();

    for (var i = 0; i < details.length; i++) {
        var principal = details[i].princpalPayment();
        console.log(principal);
    }

};

No dependency on your view, and thus unit testable. In addition, if you put this function in the correct bit of scope (eg the observable bound to the data table) you'll have access to all the relevant other observables when you want to use the result.

Answer 4

your not looking for the input value your looking at the td value which clearly doesnt exist here is a jsfiddle with the fixed jquery

http://jsfiddle.net/krxva/

updateValues = function(){
$("tbody").find("tr").each(function() {                               
   var principal = $(this).find('td.principal').find('input').val();
   console.log(principal);
});                           
};

Answer 5

var principal = $(this).find('td.principal').val();
           console.log(principal);

Above willn't work because td has an input element also.

Since you want value of input element inside that td , so use like this :

 var principal = $(this).find('td.principal input').val();
 // Or use this
 var principal = $(this).find('td.principal > input').val();
 console.log(principal);

Refer this for understanding