ASP.NET Get value from .ascx to Javascript

See more:

C#

ASP.NET

Javascript

Ajax

PROLOGUE
Hai Experts, I'm in progress in making a web app, iam using Update Panel that contain many Panel in almost every page. The main form and others form has it's own Panel control and UpdatePanel contains all that panel in one page. Except the main form, all forms is hidden because in some condition i need to show the related form under the main form and if it's required i must show other related form again under it.

PROBLEMS
I want to put multiple upload functionality in one that has the most panel (still it only have 1 Update Panel). The problem is because of that Update Panel, FileUpload control that i want to get value from aspx.cs always contain null. Someone has give me a solution for using AJAX Control Tool Kit and it works (the FileUpload control is sending it's value 'not null anymore'). Then the problem comes next is, i want to make filter like limited extension or limited length in Java Script but FileUpload control still sending null to Java Script. If i put that filter on the server by click btnRefSave_Click (you could see at the script below), when the page show message "failed" because some fields is not filled or because other, the page always reload and i must refill all that many field and again the position view of page back to its default just like when i open a new page, thats why i dont want to put that filter on server.

i've tried like this (Error : to many characters in character literal) :

------> var UploadControl = document.getElementById('<%=FileUpload'+exCounter+'.ClientID%>').Value;

CONCLUSION
Please help me solve this problem : How to make all the fields has i fill is not clear itself and the position view of page does not change (just like javascript do).

SCRIPT

 <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<script>
 var counter = 1;        
 function AddFileUpload() {            
 if (counter < 5) {                
 counter++;                
 var div = document.createElement('DIV');                 
div.innerHTML = '<input id="FileUpload' + counter + '" name = "file' + counter +'" type="file" TabIndex="'+ counter +'"/>' +               '<input id="Button' + counter + '" type="button" ' +'value="Remove"  önclick = "RemoveFileUpload(this)" />';                 document.getElementById("FileUploadContainer").appendChild(div);             }            
 else                 
alert("Can\'t attach more than 5 file");              
}            

 function RemoveFileUpload(div) {            
 if (counter != 1) {                 
document.getElementById("FileUploadContainer").removeChild(div.parentNode);                
 counter--;             
}            
 }

function ValidateAttachment() {         

for (var exCounter = 1; exCounter <= counter; exCounter++) {           
----->  var UploadControl = document.getElementById("FileUpload"+exCounter).Value;
 if (UploadControl == null) {                     
alert('Please insert all the upload field !');                     
return false;                
 }                
 if ((UploadControl == ".txt") || (UploadControl == ".doc") || (UploadControl) {                     
alert('File UploadControl extension not supported !');                    
 return false;                
 }             
}           
}           
 </script>

<asp:UpdatePanel ID="UpAttachment" runat="server">     
...     
...     
<asp:ImageButton ID="ImageRefbtnSave" runat="server" ImageUrl="~/Images/btnSave.gif"    
 AlternateText="Save" OnClick="btnRefSave_Click" OnClientClick="return ValidateAttachment()"     
CausesValidation="false" />    
 ...     
...     
<div>    
 <asp:HiddenField ID="hfFileUploadMultiple" runat="server" />     
<asp:Label ID="lblError" runat="server" Font-Bold="true" ForeColor="Red"></asp:Label><br />     
<span style="font-family: Arial"><span style="color: #003366"> Click to add files</span></span>     
<input id="Button1"  önclick="AddFileUpload()" style="height: 27px; width: 74px;"    
 tabindex="25" type="button" value="add" />    
 <br />     
<div id="FileUploadContainer">    
 <asp:FileUpload ID="FileUpload1" runat="server" />    
 </div>    
 ...     
...     
<Triggers>    
 <asp:PostBackTrigger ControlID="ImageRefbtnSave" />    
 </Triggers>    
 </asp:UpdatePanel>