James Evans:Hi All -
I have a UserControl that contains 3 datadropdowns. I have added the control to a content page (that has a master page) inside a tabel. I need to be able to access the selected values of the dropdown controls that are contained within the UserControl from javascript. This is a time entry UserControl and when I placed it on the page I gave it the ID of "ucPreTime" (eventually there will be a PostTime). The control contains ddlHour, ddlMinute and ddlAmPm. In view source I see that the ID that gets generated for ddlHour is "ucPreTime_ddlHour" so I have attempted many differnt version of using that ID (from googling it to death) but cannot get a handle on the control. Some of the things I have tried are:
-
var preTime = getElementById("ucPreTime_ddlHour");
-
var preTime = $get("<%=ucPreTime_ddlHour %>");
-
document.todaysdraw.elements[ucPreTime:ddlHour] - where todaysdraw is the name of the aspx page.
Any help with this ?
Thanks.
Hi James,
Happy New Year. For accessing child control in client side you can use getElementsByTagName() method. In your case you need to access drop down lists which get rendered as <input type="select"> in the client's browser. This is what you need to do.
Step 1 : Registering ClientID in a client side array
When you use master pages, the IDs of the controls which are finally rendered in the browser are prefixed with "ct100_<content place holder ID>" . So to access these elements from javascript, you can register their clientIDs in client side arrays. To do this, the following code is used.
protected void Page_Load(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript("CONTROL","'"+ctrl.ClientID+"'");
//Rest of your page load logic.
}
On page_load the clientID of your control (ctrl is used as an example here) is registered to a client side array. Now in javascript CONTROL[0] stores the client ID of the control. (CONTROL[0] = 'ct100_cphContentPage_ctrl'). The advantage with this method is you can hive off the javascript functions to a seperate file.
Step 2 : Javascript function to obtain the selected value of all the drop down list child controls of the user control
Here, getElementsByTagName method can be used. Since all the drop down lists are rendered as <input type="select"> "INPUT" is passed as a parameter to this method. To do this, the following code is used.
function fnGetSelectedValues()
{
var UserControl = document.getElementById(CONTROL[0]);
var arrInput = UserControl.getElementsByTagName("INPUT");
for(var i=0;iif(arrInput[i].type == "select")
{
//Obtain the selected value and perform necessary operations
}
}
} This gives you full access to all the drop down lists in you User Control. You can add this function to the OnClientClick event of the Submit button to perform validations on the client side.
If you face any issues with this design please let me know.
Please mark the post as answer if it helped you.
Shyam Sundar Vasudevan
Developer