ASP.NET Get the Ids of each control in a list of controls using javascript

Question

in an ASP.NET/C# application, I have a list (or array) of controls (for example textboxes) declared and added in the code behind.

List<TextBox> LstOfBoxes = new List<TextBox>();

I want to use Javascript to change the visibility of all the controls in the list (or array).

I know that if i want to change the visibility of 1 textbox I use this:

document.getElementById("<%=TextBox1.ClientID %>").style.display = 'none';

But how to loop through all the list (or array), get the ids of each control and change the display to 'none'

Thanks a lot.

GHP · Accepted Answer · 2011-10-14 14:52:49Z

Bear in mind that the List itself will not create an HTML element on the page. If you have a List and in your code behind you loop through that list to drop the items on the page, then you won't have any clear way to target just those textboxes. I'd wrap them in a container like so:

List<TextBox> listOfTb = MethodToFillYourList();
var panel = new Panel { CssClass = "tbHolder" };
foreach (var textbox in listOfTb)
{
     panel.Controls.Add(textbox);
}
YourControlToAddTextBoxesTo.Controls.Add(panel);

Now on the client side, hit the "tbHolder" div (Panel control = div tag in .NET) and hide each textbox inside it. Here's a jQuery and a normal JS version of that hide routine.

// New JQuery hotness
$(".tbHolder input[type=text]").hide();

// Old and Busted JS
var tbs = document.getElementsByClassName("tbHolder").getElementsByTagName("input");
for (var i = 0; i < tbs.length; i++) {
     tbs[i].style.display = 'none';
}

KV Prajapati · Accepted Answer · 2011-10-14 14:37:53Z

1

Obtain the list via document.getElementsByTagName() or document.getElementsByClassName() method. Another way is to wrap all input text fields (TextBox) into a <div> and set style property to that <div>.

answered Oct 14, 2011 at 14:37

KV Prajapati

94.8k20 gold badges151 silver badges188 bronze badges

2 Comments

Y2theZ Over a year ago

Hi, Thanks for the answer. The textboxes are generated in the code behind and not in the design page. can you tell me how to use getElementsByTagName() to get them? What Tag Name do I use? Thanks

KV Prajapati Over a year ago

@Youssef - Name of tag is input or even it is better to assign a class name for all textboxes.

George · Accepted Answer · 2011-10-14 14:33:13Z

0

You sholw to store every control in repeater in div. It will helps you, when you will use jQuery selectors like parent and child. Sorry for my English :)

answered Oct 14, 2011 at 14:33

George

7561 gold badge9 silver badges16 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:55:40Z

0

Assuming that you have already added the controls to the page somehow, you can simply loop through and emit a line for each function:

<script language="javascript" type="text/javascript">
function setVisibility(displayType) {
    var type = displayType || 'none';

    <% foreach (var textBox in LstOfBoxes) { %>
    document.getElementById("<%=textBox.ClientID %>").style.display = displayType;
    <% } %>
}
</script>

Since you didn't mention you were using jQuery I won't list that here, but you really should look into doing what Graham suggests.

edited May 23, 2017 at 11:55

CommunityBot

11 silver badge

answered Oct 14, 2011 at 14:55

Josh

45k7 gold badges106 silver badges125 bronze badges

Collectives™ on Stack Overflow

ASP.NET Get the Ids of each control in a list of controls using javascript

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related