Javascript/C#: Appearing Textarea OnClick

Question

I have an html list. Within this list are a series of images, some information and a button. When the user clicks the button, I want a textarea and a button to appear below the associated image within the list. The user then fills out the textarea with some machine learning feedback and clicks the button to send a postback to the server.

How do I write Javascript that will appear on a button press, but is still at the same time associated with the parent image?

I would like an answer in straight Javascript, not jQuery, as I'm still learning Javascript. I'm using C# 4.0 and ASP.net.

I have several possible implementation ideas:

1. Create a Javascript function that writes html using Response.Write that contains the textarea and button. I couldn't use an asp:button so I don't really know how I would accomplish a postback.
2. Have a single hidden asp:button and asp:textbox that get populated when the magic appearing button is pressed. The magic button would pass an id to the asp:button and activate a click. I might need a hidden label to store the value of the id.

I think #2 is the best and probably easiest method, but I don't know the best way to make an appearing panel in Javascript.

Answer 1

If you want to use ASP.NET as well, add the textareas in a repeater-type control and surround the textbox elements in a simple tag. give each div a unique id which can be determined using the textbox ClientID property generated by .NET. Then, create a single javascript function that takes in an id as an argument and sets that element's visibiity to true or falase depending on its current state. This way you have only one javascript function that can handle showing or hiding any of your textboxes and your postbacks are still intact using ASP.NET postbacks.

Your javascript function would be something like...

function showHideTextBox(divID)
{
   if(document.getElementById(divID).style.visibility == "visible")
   {
       document.getElementById(divID).style.visibility = "hidden";
   }
   else
   {
       document.getElementById(divID).style.visibility = "visible";        
   }
}

For your button that need to show or hide the textboxes, set their OnClientClick events to the function. For example...

string divID = "div" + myDynamicTextBox.ClientID;
btn.OnClientClick = "showHideTextBox('" + divID + "')";

Hope that helps!