How to get IDs of Generated controls in ASP.net using JavaScript or JQuery

Question

I have DataGrid and inside it one of the columns is a TextBox. The DataGrid is generated dynamically from Database. It is for invoicing. One invoice might have two rows, another might have 10. The ID of each of these textboxes are different, and I need to read the value of each of these text boxes when the user enters an amount, add all of them up, and show the total in another field.

Problem: I don't know how to get to each textbox (there is ValueChanged event that fires when the user enters an amount for that specific text box)

I'm trying to solve this using Javascript or JQuery. (No updatePanel)

Any help is greatly appreciated.

Thanks.

Answer 1

Give each text box a class name. Then you can iterate through each textbox by the following

var total=0;

$(".className").each(function(){

    total += Number(this.val());

});

Answer 2

If your grid has an id of grid , then you could do:

$('#grid input[type=text]').each(function(){
   ///Glorious code!!
});

Answer 3

Using jQuery,

$(document).on("ready", function(){
    $("document").on("keyup input paste", "input", function(){
        var inputID = $(this).attr('id');
        //more code here...
    });
});

Using event delegation, the event will always be fired on all textboxes. Change "input" to a more specific selector if needed.

Answer 4

Don't use IDs if you want to add listener to each of all your textbox, instead use class.

<input type="text" class="my-text-box">

and the JS(using jQuery)

$('.my-text-box').keyup(function(){
console.log($(this).val());

});

this will display the value of the textbox whenever you type something.