• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3344
  • Last Modified:

How to use variable in document.getElementById?

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
zillion_kamesh
Asked:
zillion_kamesh
  • 12
  • 7
  • 3
  • +2
1 Solution
 
Obadiah ChristopherCommented:
cbo_"+idArray[i]+"_bnk1type.Clientid

should be cbo_"+idArray[i]+"_bnk1type
0
 
zillion_kameshAuthor Commented:
 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
 
Obadiah ChristopherCommented:
document.getElementById(lc_con);
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
zillion_kameshAuthor Commented:
sorry its also not working
when page load the following error occur expected ';'
0
 
Obadiah ChristopherCommented:
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
 
zillion_kameshAuthor Commented:
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
 
Obadiah ChristopherCommented:
Can u alert the value of idArray?

alert(idArray[i]);
var lc_con = "txt_"+idArray[i]+"_bnk1acno";
0
 
zillion_kameshAuthor Commented:
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
 
zillion_kameshAuthor Commented:
Any solution?? need urgent solution...
0
 
Pravin AsarPrincipal Systems EngineerCommented:
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
 
Obadiah ChristopherCommented:
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
 
ahoffmannCommented:
>   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
 
zillion_kameshAuthor Commented:
i attached a file..
 I just aspx and java script coding only..
if u want any further details please inform...
 
 
 

clmaster.doc
0
 
zillion_kameshAuthor Commented:
I attached simple sample ...
In this also i got the same problem
please go though this one and reply....
 

sample.doc
0
 
Obadiah ChristopherCommented:
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
 
zillion_kameshAuthor Commented:
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
 
zillion_kameshAuthor Commented:
eventhough i use ajax tab panel ,if i use directly like
document.getElementById("<%= txt_nse_bnk1acno.ClientID %>"));   then its works fine...
0
 
Obadiah ChristopherCommented:
I'll take a look @ the html and revert back with ur confusion also.
0
 
ahoffmannCommented:
> .. attached the Html source also
please post  the plain HTML as simple text, no proprietary formats in attached files please
0
 
zillion_kameshAuthor Commented:

<%@ 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
 
ahoffmannCommented:
can you also post the HTML code from the browser
0
 
zillion_kameshAuthor Commented:

<!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
 
Michel PlungjanIT ExpertCommented:
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
 
zillion_kameshAuthor Commented:
Thanks for your solution Mr.mplungian. You did a great job .
0
 
Michel PlungjanIT ExpertCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

  • 12
  • 7
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now