Solved

How to use variable in document.getElementById?

Posted on 2009-04-09
29
2,662 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
Comment Utility
cbo_"+idArray[i]+"_bnk1type.Clientid

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

Author Comment

by:zillion_kamesh
Comment Utility
 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
Comment Utility
document.getElementById(lc_con);
0
 

Author Comment

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

Expert Comment

by:informaniac
Comment Utility
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
Comment Utility
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
Comment Utility
Can u alert the value of idArray?

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

Author Comment

by:zillion_kamesh
Comment Utility
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
Comment Utility
Any solution?? need urgent solution...
0
 
LVL 28

Expert Comment

by:Pravin Asar
Comment Utility
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
Comment Utility
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
Comment Utility
>   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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

Author Comment

by:zillion_kamesh
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
I'll take a look @ the html and revert back with ur confusion also.
0
 
LVL 51

Expert Comment

by:ahoffmann
Comment Utility
> .. 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
Comment Utility

<%@ 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
Comment Utility
can you also post the HTML code from the browser
0
 

Author Comment

by:zillion_kamesh
Comment Utility

<!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
Comment Utility
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
Comment Utility
Thanks for your solution Mr.mplungian. You did a great job .
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
How to open a link from vb.net app 3 9
dynamic menu in asp.net c# 11 25
Asp.net mvc 5 5 15
Disk Ram Peak 1 12
Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…
The viewer will learn how to use the return statement in functions in C++. The video will also teach the user how to pass data to a function and have the function return data back for further processing.

763 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

10 Experts available now in Live!

Get 1:1 Help Now