如何使用javascript定位动态生成的文本框

Question

I have a TextBox that gets generated in a GridView dynamically. When you inspect the page the TextBox looks like this below. I am trying to find a way to target this TextBox and all other TextBoxes in this GridView so that i can run a script against them. I am having a lot of trouble finding a way of being able to target this text box. I tried setting a style class to the GridView and call on that but it doesn't seem to be working.

<input name="ctl00$MainContent$controlProductsList1$gvItems$ctl04$Option-30482_e0edc10a-7dba-40d0-a4f1-7c4c5801c0ca" type="text" id="MainContent_controlProductsList1_gvItems_Option-30482_e0edc10a-7dba-40d0-a4f1-7c4c5801c0ca_2">

What is the best way using javascript to target the TextBoxes that are dynamically generated in a GridView?

Can you give the gridview a class and call on that class alone?

This is the script that will need to target the inputs

$('#inputID').keyup(function(){
    this.value = this.value.toUpperCase();
});

Answer 1

One of the idea could be put a css class on the textbox. If it is generated by your code dynamically.
And then use class selector in your jQuery.

  $('.inputcss').keyup(function(){
               this.value = this.value.toUpperCase();
   });

Or even you can use id of the gridview and find input:text inside the gridview and use your function. Below is a sample code

 $('#<%=grid.ClientID%>')
 .find('tr')
 .each(function(row) {
      $(this).find('input')
            .each(function(col) {
                      $(this).keyup(function(){
               this.value = this.value.toUpperCase();
                  });

                  } 
             });
  });

}); 

Edit 1

And if you only want to show in upper case you can use css as follows

 h1 {text-transform:uppercase;}

More details

http://www.w3schools.com/cssref/pr_text_text-transform.asp

Answer 2

Since you appear to be using jQuery, check out your options on the JQuery selector page. One option is to use a generic input selector like:

$("#<%=gvItems.ClientID%> :input").keyup(function(){
      this.value = this.value.toUpperCase();
});

The code above assumes your control is called gvItems and will render the client ID of the grid view for use in the JQuery ID selector (#MainContent_controlProductsList1_gvItems...) and find all input child elements (:input).

Another option would be to put a class directly on the input controls:

$(".inputClass").keyup(function(){
    this.value = this.value.toUpperCase();
});