How to target dynamic generated text boxes using 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();
});

@Sam What would be the difference? Still have to target the textbox right? Maybe you can elaborate. I am not sure what you mean. — jackncoke
– jackncoke, Commented Jul 5, 2013 at 14:54
sorry my bad. I was going to say have you tried to get it with ClientID — Zaki
– Zaki, Commented Jul 5, 2013 at 15:01

Josh Lyon · Accepted Answer · 2013-07-05 15:13:10Z

1

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();
});

edited Jul 5, 2013 at 15:13

answered Jul 5, 2013 at 15:01

Josh Lyon

3995 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

शेखर · Accepted Answer · 2013-07-05 15:05:21Z

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

edited Jul 5, 2013 at 15:05

answered Jul 5, 2013 at 14:54

शेखर

17.6k14 gold badges64 silver badges123 bronze badges

1 Comment

Tommi Over a year ago

Agreed, classes usage is most easy way to find server control on client.

Collectives™ on Stack Overflow

How to target dynamic generated text boxes using javascript

2 Answers 2

Comments

Edit 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Edit 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related