Solved

How to use variable in document.getElementById?

Posted on 2009-04-09
29
2,688 Views
Last Modified: 2012-05-06
My form contains Many tab pages(General,bank,scheme,etc....)
In Bank Tab contain 3 to 4 tab pages based on condition
Each tab page is same set of controls and same validation..
for example if bank A/c no.  is not empty but bank account type is empty then it should fire some warning msg before save..
So i call a java script function before save using OnClientClick =" return validate()"
within javascript using array to form a variable and then find a control and check the validation i required.. but getelementby is not working well.. its not return the object , it return null only...
actually i want to search controls are cbo_nse_bnk1type ,txt_nse_bnk1acno
my code is like below
 
 var lc_con = "txt_"+idArray[i]+"_bnk1acno.Clientid";
    var txtbacno =  document.getElementById("<%= "+lc_con+" %>");
    var lc_con = "cbo_"+idArray[i]+"_bnk1type.Clientid";
    var cbobtype = document.getElementById("<%= "+ lc_con+" %>");
 
Instead if i use like below then works fine..
 var cbobnk = document.getElementById("<%= cbo_NSE_bnk1type.Clientid %>");
but i know control's name at runtime only based on condition(
either it will be cbo_BSE_bnk1type, cbo_MCX_bnk1type, cbo_CNSE_bnk1type etc)
So only during form load i create array  based on the condition and store it into hidden control..
within java script use that hidden control to form a control name and then find the particular control...
please help me... need Urgent solution...
function validate()

{

 var obj = document.getElementById("<%= hid_bank.ClientID %>"); 

var idArray = obj.value.split(','); 

for ( var i=0; i< idArray.length; i++)

{

 var lc_con = "txt_"+idArray[i]+"_bnk1acno.Clientid"; 

    var txtbacno =  document.getElementById("<%= "+lc_con+" %>");

    var lc_con = "cbo_"+idArray[i]+"_bnk1type.Clientid"; 

    var cbobtype = document.getElementById("<%= "+ lc_con+" %>");

if( txtbacno.value!="" && cbobtype.options[cbobtype.selectedIndex].value ="")

     {

     alert("Bank A/c type sholud  not be empty");

     return false;

     }

}

}

Open in new window

0
Comment
Question by:zillion_kamesh
  • 12
  • 7
  • 3
  • +2
29 Comments
 
LVL 20

Expert Comment

by:informaniac
ID: 24105578
cbo_"+idArray[i]+"_bnk1type.Clientid

should be cbo_"+idArray[i]+"_bnk1type
0
 

Author Comment

by:zillion_kamesh
ID: 24106186
 var lc_con = cbo_"+idArray[i]+"_bnk1type.Clientid;
    var cbobtype = document.getElementById("<%= "+ lc_con+" %>");
I changed the code like this... But not working.. got error like expected ;
 
0
 
LVL 20

Expert Comment

by:informaniac
ID: 24106364
document.getElementById(lc_con);
0
 

Author Comment

by:zillion_kamesh
ID: 24106845
sorry its also not working
when page load the following error occur expected ';'
0
 
LVL 20

Expert Comment

by:informaniac
ID: 24115023
Well this is the entire code,

I think this should work
function validate()

{

 var obj = document.getElementById("<%= hid_bank.ClientID %>"); 

var idArray = obj.value.split(','); 

for ( var i=0; i< idArray.length; i++)

{

 var lc_con = "txt_"+idArray[i]+"_bnk1acno"; 

    var txtbacno =  document.getElementById(lc_con);

    var lc_con = "cbo_"+idArray[i]+"_bnk1type"; 

    var cbobtype = document.getElementById(lc_con);

if( txtbacno.value!="" && cbobtype.options[cbobtype.selectedIndex].value ="")

     {

     alert("Bank A/c type sholud  not be empty");

     return false;

     }

}

}

Open in new window

0
 

Author Comment

by:zillion_kamesh
ID: 24128784
now error not came..  
but it returns null only... not an object ((txtbacno)
Please give any solution for this.. very urgent......
Thanks in advance
 
0
 
LVL 20

Expert Comment

by:informaniac
ID: 24135284
Can u alert the value of idArray?

alert(idArray[i]);
var lc_con = "txt_"+idArray[i]+"_bnk1acno";
0
 

Author Comment

by:zillion_kamesh
ID: 24145112
The vales comes correctly..
i check both idarray[i] and lc_con...
Its alerts correctly(nse, txt_nse_bnk1acno)
but document.getelement returns null only...
alert(document.getElementById("<%= txt_nse_bnk1acno.ClientID %>"));   // returns object
 alert(document.getElementById("<%= txt_nse_bnk1acno %>"));  // returns null
alert(lc_con) // returns txt_nse_bnk1acnovar
txtbacno =  document.getElementById(lc_con);
alert(txtbacno ) ;  // returns null
Any other logic is there for this?
0
 

Author Comment

by:zillion_kamesh
ID: 24145567
Any solution?? need urgent solution...
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 24208033
Looks like you may be having leading/trailing white spaces in the the object value.

So you can try to trim the leading/trailing whitespaces, with the following function.



function trim(stringToTrim) {
      return stringToTrim.replace(/^\s+|\s+$/g,"");
}

Then you do getElementById

e.g.


document.getElementById(trim('MY_ID "));
0
 
LVL 20

Expert Comment

by:informaniac
ID: 24222367
Try alerting this

<%= txt_nse_bnk1acno.ClientID %>

because all u have to get is the client id that is generated and then use document.getElementByID.

Is possible please post the entire aspx page...
0
 
LVL 51

Expert Comment

by:ahoffmann
ID: 24223837
>   var cbobtype = document.getElementById("<%= "+ lc_con+" %>");

are you asking for a solution on the server or in the browser?
I assume that you want to make check with JavaScript in the browser, then you need to pass real time variables to the DOM functions.
Have you ensured that your server code  <%= "+ lc_con+" %> is evaluated to the correct variable name? Please post the code you see in the browser, not that you have in your development.
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:zillion_kamesh
ID: 24240255
i attached a file..
 I just aspx and java script coding only..
if u want any further details please inform...
 
 
 

clmaster.doc
0
 

Author Comment

by:zillion_kamesh
ID: 24302488
I attached simple sample ...
In this also i got the same problem
please go though this one and reply....
 

sample.doc
0
 
LVL 20

Expert Comment

by:informaniac
ID: 24303286
Once the page is run. Right click and paste the html source of the page generated.

Looks like u r using a tab container of ajax...

var lc_con = "txt_"+idArray[i]+"_bnk1acno.clientID";

this line won't work....

And can u tell us what does the hidden control hid_bank contain?
0
 

Author Comment

by:zillion_kamesh
ID: 24311786
s. I am using Ajax tab control....

The hidden control contained
            Me.hid_bank.Value = "nse,nse1"
I attached the Html source also...
 
 

samphtml.doc
0
 

Author Comment

by:zillion_kamesh
ID: 24311844
eventhough i use ajax tab panel ,if i use directly like
document.getElementById("<%= txt_nse_bnk1acno.ClientID %>"));   then its works fine...
0
 
LVL 20

Expert Comment

by:informaniac
ID: 24311929
I'll take a look @ the html and revert back with ur confusion also.
0
 
LVL 51

Expert Comment

by:ahoffmann
ID: 24311947
> .. attached the Html source also
please post  the plain HTML as simple text, no proprietary formats in attached files please
0
 

Author Comment

by:zillion_kamesh
ID: 24312468

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" title="Untitled Page" %>
 
<%@ Register Assembly="System.Web.Extensions" Namespace="System.Web.UI" TagPrefix="asp1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
 <script language="javascript"  type="text/javascript">
  function validate()
{
 var obj = document.getElementById("<%= hid_bank.ClientID %>");
var idArray = obj.value.split(',');
for ( var i=0; i< idArray.length; i++)
{
 var lc_con = "txt_"+idArray[i]+"_bnk1acno.clientID";
   var txtbacno =  document.getElementById(lc_con); // Not working .. returns null only
    var lc_con1 = "cbo_"+idArray[i]+"_bnk1type.clientID";
    var cbobtype = document.getElementById(lc_con1);  // Not working
   if(txtbacno.value!="")
     {
     alert("Bank A/c type sholud  not be empty");
     return false;
     }
}
}
     </script>
 
    <asp:HiddenField ID="hid_bank" runat="server" />
    <asp1:ScriptManager id="ScriptManager1" runat="server">
    </asp1:ScriptManager>
      <asp:Button ID="cmd_proceed" runat="server"  OnClientClick="return validate();"  Text="Proceed" />
    <ajaxToolkit:TabContainer ID="tab_bank" runat="server">
    <ajaxToolkit:TabPanel ID="tab_nse" runat="server">
    <HeaderTemplate>NSE</HeaderTemplate>
    <ContentTemplate>
        <asp:Label ID="Label1" runat="server" Text="Account No"></asp:Label>
        <asp:TextBox ID="txt_nse_bnk1acno" runat="server"></asp:TextBox>
        <asp:Label ID="Label2"  runat="server" Text="Account Type"></asp:Label>
        <asp:DropDownList ID="cbo_nse_bnk1type" runat="server">
        <asp:ListItem>Saving</asp:ListItem>
        <asp:ListItem>Current</asp:ListItem>
        <asp:ListItem>Others</asp:ListItem>
       
        </asp:DropDownList>
        </ContentTemplate>
    </ajaxToolkit:TabPanel>
     <ajaxToolkit:TabPanel ID="tab_nse1" runat="server">
      <HeaderTemplate>NSE FAO</HeaderTemplate>
     <ContentTemplate>
         <asp:Label ID="Label3" runat="server" Text="Account No"></asp:Label>
         <asp:TextBox ID="txt_nse1_bnk1acno" runat="server"></asp:TextBox>
         <asp:Label ID="Label4" runat="server" Text="Account Type"></asp:Label>
         <asp:DropDownList ID="cbo_nse1_bnk1type" runat="server">
           <asp:ListItem>Saving</asp:ListItem>
        <asp:ListItem>Current</asp:ListItem>
        <asp:ListItem>Others</asp:ListItem>
         </asp:DropDownList></ContentTemplate>
    </ajaxToolkit:TabPanel>
     <ajaxToolkit:TabPanel ID="tab_cnse_bnk1acno" runat="server">
      <HeaderTemplate>NSE CURRENCY</HeaderTemplate>
        <ContentTemplate>
            <asp:Label ID="Label5" runat="server" Text="Account No"></asp:Label>
        <asp:TextBox ID="txt_cnse" runat="server"></asp:TextBox>
            <asp:Label ID="Label6" runat="server" Text="Account Type"></asp:Label>
         <asp:DropDownList ID="cbo_cnse_bnk1type" runat="server" > 
           <asp:ListItem>Saving</asp:ListItem>
        <asp:ListItem>Current</asp:ListItem>
        <asp:ListItem>Others</asp:ListItem>
         </asp:DropDownList></ContentTemplate>
       
    </ajaxToolkit:TabPanel>
    </ajaxToolkit:TabContainer>
</asp:Content>
 

Partial Class test
    Inherits System.Web.UI.Page
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Me.hid_bank.Value = "nse,nse1"
       End If
    End Sub
End Class
---------------------------------------------------------------
i want to find control at runtime using dynamic variable (txt_nse_ bnk1acno,txt_nse1_bnk1acno....) and do some validation...
The tab panel is show based on some condition... so only i store the value in hiddenfield and use in javascript...
 

test.bmp
0
 
LVL 51

Expert Comment

by:ahoffmann
ID: 24312804
can you also post the HTML code from the browser
0
 

Author Comment

by:zillion_kamesh
ID: 24313114

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
 Untitled Page
</title></head>
<body>
    <form name="aspnetForm" method="post" action="test.aspx" id="aspnetForm">
<div>
<input type="hidden" name="ctl00_ContentPlaceHolder1_tab_bank_ClientState" id="ctl00_ContentPlaceHolder1_tab_bank_ClientState" value="{&quot;ActiveTabIndex&quot;:0,&quot;TabState&quot;:[true,true,true]}" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTUzNjg3Nzg1OGQYAgUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgEFImN0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkdGFiX2JhbmsFImN0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkdGFiX2JhbmsPD2RmZBaTVK3rWVJ9jZAHWpqNqEzX9D8k" />
</div>

<script type="text/javascript">
<!--
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
// -->
</script>

 
 <script language="javascript"  type="text/javascript">
   function validate()
{
 var obj = document.getElementById("ctl00_ContentPlaceHolder1_hid_bank");
var idArray = obj.value.split(',');
for ( var i=0; i< idArray.length; i++)
{
 var lc_con = "txt_"+idArray[i]+"_bnk1acno.clientID";
    var txtbacno =  document.getElementById(lc_con);
    var lc_con1 = "cbo_"+idArray[i]+"_bnk1type.clientID";
    var cbobtype = document.getElementById(lc_con1);
    if(txtbacno.value!="")
     {
     alert("Bank A/c type sholud  not be empty");
     return false;
     }
}
}

     </script>
    <input type="hidden" name="ctl00$ContentPlaceHolder1$hid_bank" id="ctl00_ContentPlaceHolder1_hid_bank" value="nse,nse1" />
    <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ContentPlaceHolder1$ScriptManager1', document.getElementById('aspnetForm'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>

      <input type="submit" name="ctl00$ContentPlaceHolder1$cmd_proceed" value="Proceed" onclick="return validate();" id="ctl00_ContentPlaceHolder1_cmd_proceed" />

    <div class="ajax__tab_xp" id="ctl00_ContentPlaceHolder1_tab_bank" style="visibility:hidden;">
 <div id="ctl00_ContentPlaceHolder1_tab_bank_header">
  <span id="__tab_ctl00_ContentPlaceHolder1_tab_bank_tab_nse">NSE</span><span id="__tab_ctl00_ContentPlaceHolder1_tab_bank_tab_nse1">NSE FAO</span><span id="__tab_ctl00_ContentPlaceHolder1_tab_bank_tab_cnse_bnk1acno">NSE CURRENCY</span>
 </div><div id="ctl00_ContentPlaceHolder1_tab_bank_body">
  <div id="ctl00_ContentPlaceHolder1_tab_bank_tab_nse">
   
        <span id="ctl00_ContentPlaceHolder1_tab_bank_tab_nse_Label1">Account No</span>
        <input name="ctl00$ContentPlaceHolder1$tab_bank$tab_nse$txt_nse_bnk1acno" type="text" id="ctl00_ContentPlaceHolder1_tab_bank_tab_nse_txt_nse_bnk1acno" />
        <span id="ctl00_ContentPlaceHolder1_tab_bank_tab_nse_Label2">Account Type</span>
        <select name="ctl00$ContentPlaceHolder1$tab_bank$tab_nse$cbo_nse_bnk1type" id="ctl00_ContentPlaceHolder1_tab_bank_tab_nse_cbo_nse_bnk1type">
    <option value="Saving">Saving</option>
    <option value="Current">Current</option>
    <option value="Others">Others</option>
   </select>        
  </div>
<div id="ctl00_ContentPlaceHolder1_tab_bank_tab_nse1" style="display:none;visibility:hidden;">
            <span id="ctl00_ContentPlaceHolder1_tab_bank_tab_nse1_Label3">Account No</span>
         <input name="ctl00$ContentPlaceHolder1$tab_bank$tab_nse1$txt_nse1_bnk1acno" type="text" id="ctl00_ContentPlaceHolder1_tab_bank_tab_nse1_txt_nse1_bnk1acno" />
         <span id="ctl00_ContentPlaceHolder1_tab_bank_tab_nse1_Label4">Account Type</span>
         <select name="ctl00$ContentPlaceHolder1$tab_bank$tab_nse1$cbo_nse1_bnk1type" id="ctl00_ContentPlaceHolder1_tab_bank_tab_nse1_cbo_nse1_bnk1type">
    <option value="Saving">Saving</option>
    <option value="Current">Current</option>
    <option value="Others">Others</option>
   </select>  </div>
<div id="ctl00_ContentPlaceHolder1_tab_bank_tab_cnse_bnk1acno" style="display:none;visibility:hidden;">
                <span id="ctl00_ContentPlaceHolder1_tab_bank_tab_cnse_bnk1acno_Label5">Account No</span>
        <input name="ctl00$ContentPlaceHolder1$tab_bank$tab_cnse_bnk1acno$txt_cnse" type="text" id="ctl00_ContentPlaceHolder1_tab_bank_tab_cnse_bnk1acno_txt_cnse" />
            <span id="ctl00_ContentPlaceHolder1_tab_bank_tab_cnse_bnk1acno_Label6">Account Type</span>
         <select name="ctl00$ContentPlaceHolder1$tab_bank$tab_cnse_bnk1acno$cbo_cnse_bnk1type" id="ctl00_ContentPlaceHolder1_tab_bank_tab_cnse_bnk1acno_cbo_cnse_bnk1type">
    <option value="Saving">Saving</option>
    <option value="Current">Current</option>
    <option value="Others">Others</option>
   </select>
  </div>
 </div>
</div>
    </div>
   
<div>

 <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWDwLM7auJAQKCkp2VBgKG9fndCAKL3rL5CAK+iq/KAwK92K9jApD659UHAta52IsBAsyD+bICAs/R+ZsBAuLzsa0GAoio4Y0IAon1kOQPAoqnkM0MAqeF2PsLjxAm2bhonkRdOQ1kZOZaEjbndD4=" />
</div>
<script type="text/javascript">
<!--
Sys.Application.initialize();
Sys.Application.add_init(function() {
    $create(AjaxControlToolkit.TabPanel, {"headerTab":$get("__tab_ctl00_ContentPlaceHolder1_tab_bank_tab_nse")}, null, {"owner":"ctl00_ContentPlaceHolder1_tab_bank"}, $get("ctl00_ContentPlaceHolder1_tab_bank_tab_nse"));
});
Sys.Application.add_init(function() {
    $create(AjaxControlToolkit.TabPanel, {"headerTab":$get("__tab_ctl00_ContentPlaceHolder1_tab_bank_tab_nse1")}, null, {"owner":"ctl00_ContentPlaceHolder1_tab_bank"}, $get("ctl00_ContentPlaceHolder1_tab_bank_tab_nse1"));
});
Sys.Application.add_init(function() {
    $create(AjaxControlToolkit.TabPanel, {"headerTab":$get("__tab_ctl00_ContentPlaceHolder1_tab_bank_tab_cnse_bnk1acno")}, null, {"owner":"ctl00_ContentPlaceHolder1_tab_bank"}, $get("ctl00_ContentPlaceHolder1_tab_bank_tab_cnse_bnk1acno"));
});
Sys.Application.add_init(function() {
    $create(AjaxControlToolkit.TabContainer, {"activeTabIndex":0,"clientStateField":$get("ctl00_ContentPlaceHolder1_tab_bank_ClientState")}, null, null, $get("ctl00_ContentPlaceHolder1_tab_bank"));
});
// -->
</script>
</form>
</body>
</html>

0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 24322940
the issue is that I believe that
bnk1type.clientID
is ASP so you need that translated before the page hits the browser.

For now you can try



var lc_con = 'ctl00_ContentPlaceHolder1_tab_bank_tab_'+idArray[i]+'_txt_'+idArray[i]+'_bnk1acno'

var txtbacno =  document.getElementById(lc_con);

var lc_con1 = 'ctl00_ContentPlaceHolder1_tab_bank_tab_'+idArray[i]+'_cbo_'+idArray[i]+'_bnk1type'

var cbobtype = document.getElementById(lc_con1);

Open in new window

0
 

Author Closing Comment

by:zillion_kamesh
ID: 31568442
Thanks for your solution Mr.mplungian. You did a great job .
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24323155
You are welcome.

Perhaps you can open another question to populate the lc_con and lc_con1 with a real ASP var
My suggestion is more of a hack I think.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Anyway to make "All" the default in the dropdown? 6 34
Run time Error 4 35
SQL Login 17 41
ASP.net show message while code is running 3 11
A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
The goal of the tutorial is to teach the user how to use functions in C++. The video will cover how to define functions, how to call functions and how to create functions prototypes. Microsoft Visual C++ 2010 Express will be used as a text editor an…
The viewer will learn how to pass data into a function in C++. This is one step further in using functions. Instead of only printing text onto the console, the function will be able to perform calculations with argumentents given by the user.

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now