Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

How to use variable in document.getElementById?

Posted on 2009-04-09
29
Medium Priority
?
2,925 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
NEW Veeam Agent for Microsoft Windows

Backup and recover physical and cloud-based servers and workstations, as well as endpoint devices that belong to remote users. Avoid downtime and data loss quickly and easily for Windows-based physical or public cloud-based workloads!

 

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 29

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
 

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 2000 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

NFR key for Veeam Agent for Linux

Veeam is happy to provide a free NFR license for one year.  It allows for the non‑production use and valid for five workstations and two servers. Veeam Agent for Linux is a simple backup tool for your Linux installations, both on‑premises and in the public cloud.

Question has a verified solution.

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

Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
The goal of the video will be to teach the user the concept of local variables and scope. An example of a locally defined variable will be given as well as an explanation of what scope is in C++. The local variable and concept of scope will be relat…
The goal of the video will be to teach the user the difference and consequence of passing data by value vs passing data by reference in C++. An example of passing data by value as well as an example of passing data by reference will be be given. Bot…
Suggested Courses
Course of the Month9 days, 17 hours left to enroll

927 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