Solved

How to use variable in document.getElementById?

Posted on 2009-04-09
29
2,768 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
How our DevOps Teams Maximize Uptime

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

 

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Power Action 2 46
SQL Server Serialization error 8 49
How to check if the Cron job is running or not ? 12 87
dropdownlist in asp.net vb. 3 24
This article will show, step by step, how to integrate R code into a R Sweave document
A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

710 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