Get updated value from input field

kevintivoli

Hello Team,

I have columns defined like this.

I'm trying to retrieve the updated value on the 'qty' filed when it is updated.

columns: [{ data: 'idnum' },
{ data: 'productid' }, 
{ data: 'qty', "defaultContent": '<input type="number" id="qtybtn" value="0" min="0" max="100" step="1"/>', attr: {type: "number"}}
],

I have tried a few things as below but it always gives me the first rows values.

    $(document).ready(function () {
        var table = $('#wscarttable').DataTable();

        $('#wscarttable tbody').on('click', '#qtybtn', function () {

            console.log(table.$('#qtybtn').val());

            console.log(document.getElementById("qtybtn").value)
        });
    });

colin

One problem is this:

id="qtybtn"

ids should be unique on the page - for you, every record would have a cell with the same id, which isn't valid HTML.

If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kevintivoli

Thank your for your response @colin

I removed id="qtybtn"

Here is a sample test case demonstrating the scenario.

The issue is, i am unable to retrieve the the input field 'qty' at all.

What i need is, get all table data including the current/updated value of 'qty' input field.

Thanks.

colin

Yep, you need to get the node of the cell, and then the val() of the input element - see here.

Colin

kevintivoli

@colin , Excellent !! That did the trick. Thank you very much !!

I have one last follow up question to my initial requirement of having an event, either click or change in the input field.

I basically want to update a another column in the table when the value in the input field changes.

Here is a test case demonstration which is not working.

Thanks

kthorngren

You are getting this error:

Uncaught TypeError: this.index is not a function

this is the tbody element which does not have .index() as a function and is not useable as a row-selector. Change the keyup event selector to $("#example tbody tr") and the value of this will be the tr which can be used as the selector. Here is the updated example:
http://live.datatables.net/gobigupa/3/edit

Kevin

kevintivoli

@kthorngren That worked perfectly !! Thank you so much for the explanation and the example.