locked
Problem in Accessing Server Controls Value or ID in JavaScript RRS feed

  • Question

  • User998545383 posted

    Hi,

    I have a master page MasterPage.master

     

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
    
    <!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 runat="server">
        <title>Untitled Page</title>
        <asp:ContentPlaceHolder id="head" runat="server">
      
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        </form>
    </body>
    </html>

     

     

    And a Content Page Default.aspx

     

    <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
      <script language="javascript" type="text/javascript" src="JScript.js"></script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    
    
        <asp:DropDownList ID="abc" runat="server" onchange="a();">
        <asp:ListItem Text="a" Value="a"></asp:ListItem>
        <asp:ListItem Text="b" Value="b"></asp:ListItem></asp:DropDownList>
    
    </asp:Content>

     

     

    And a javascript File JScript.js

     

    function a()
    {
    var ab=document.getElementById('<%= abc.ClientID %>');
    alert(ab);
    }

     

     

    When i Change the text of combobox it doesnot find the control abc and shows 'null' as message. I want to get the control in javascript.

    Regards

    Thursday, May 5, 2011 5:30 AM

Answers

  • User-16411453 posted

    you can hard code the id using

    .attributes.add("id", "txt_textbox")

    and call that in your javascript

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 5, 2011 4:20 PM
  • User998545383 posted

    jkirkerx your answer gives me the idea to add the control on runtime. Thanx for your support.

    Now code is modified as,

    MasterPage.master

     

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
    
    <!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 runat="server">
        <title>Untitled Page</title>
        <asp:ContentPlaceHolder id="head" runat="server">
      
        </asp:ContentPlaceHolder>
    </head>
    <body>
            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
    </body>
    </html>


     

    Default2.aspx

     

    <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
      <script language="javascript" type="text/javascript" src="JScript.js"></script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        <form id="form1" runat="server">
        </form>
    </asp:Content>


     

    Default2.aspx.cs

     

    using System;
    using System.Collections;
    using System.Configuration;
    using System.Data;
    using System.Linq;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.HtmlControls;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Xml.Linq;
    
    public partial class Default2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DropDownList ddl = new DropDownList();
            ddl.Attributes.Add("ID", "abc");
            ddl.Attributes.Add("runat", "server");
            ddl.Attributes.Add("onchange", "a();");
            ddl.Items.Add(new ListItem("1st", "1st"));
            ddl.Items.Add(new ListItem("2nd", "2nd"));
            form1.Controls.Add(ddl);
            
        }
    }


     

    JScript.js

    function a()
    {
    var ab=document.getElementById('abc');
    alert(ab);
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 6, 2011 1:32 AM

All replies

  • User1983249378 posted

    U can not access contentplacde holders content like this.

    rigth click on the element u want to acess in googl chrom or firefoz >Inspect element 

    Then it will show u its client id 

    Serverside control are placed like ctl00_contro_id

    if more deeper then couple of ctl00_ctl01 .... and so an here is client ID of one of label place inside contentplace holder

    ctl00_ContentPlaceHolder1_lbtnViewAll

    It is actually a linkbutton having ID lbtnViewAll

    Thursday, May 5, 2011 7:00 AM
  • User-33420011 posted

    What version of ASP.NET you are using. In version 4 a new future ClientIDMode is available with options 

    AutoID, Inherit, Predictable and Static

     

    Thursday, May 5, 2011 7:21 AM
  • User998545383 posted

    yes umairaslam22

    i am currntly accessing these controls like the way you told me.

    But we can actualy access these controls, if we place the function of javascript inside HeaderContent of Default.aspx page.

    Thanks for reply

    Thursday, May 5, 2011 7:51 AM
  • User998545383 posted

    thanx tanatrajan

    i am using 2.0, i know little about he ClientIDMode in 4.0.

    But i have problems in accessing control using .js file.

    If you have any idea about that then please reply.

    Thursday, May 5, 2011 7:54 AM
  • User-16411453 posted

    you can hard code the id using

    .attributes.add("id", "txt_textbox")

    and call that in your javascript

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 5, 2011 4:20 PM
  • User998545383 posted

    jkirkerx your answer gives me the idea to add the control on runtime. Thanx for your support.

    Now code is modified as,

    MasterPage.master

     

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
    
    <!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 runat="server">
        <title>Untitled Page</title>
        <asp:ContentPlaceHolder id="head" runat="server">
      
        </asp:ContentPlaceHolder>
    </head>
    <body>
            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
    </body>
    </html>


     

    Default2.aspx

     

    <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
      <script language="javascript" type="text/javascript" src="JScript.js"></script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        <form id="form1" runat="server">
        </form>
    </asp:Content>


     

    Default2.aspx.cs

     

    using System;
    using System.Collections;
    using System.Configuration;
    using System.Data;
    using System.Linq;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.HtmlControls;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Xml.Linq;
    
    public partial class Default2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DropDownList ddl = new DropDownList();
            ddl.Attributes.Add("ID", "abc");
            ddl.Attributes.Add("runat", "server");
            ddl.Attributes.Add("onchange", "a();");
            ddl.Items.Add(new ListItem("1st", "1st"));
            ddl.Items.Add(new ListItem("2nd", "2nd"));
            form1.Controls.Add(ddl);
            
        }
    }


     

    JScript.js

    function a()
    {
    var ab=document.getElementById('abc');
    alert(ab);
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 6, 2011 1:32 AM
  • User1983249378 posted

    you are just missing .value use it like

    var ctl = document.getElementById('<% =txtShippingFirstName.ClientID %>').value;

    or you can use innerText also

    Friday, May 6, 2011 1:36 AM
  • User-16411453 posted

    You can get pretty fancy with javascript and jquery, but the main thing when modeling or composing an idea or thought, is to get the control up and running first.

    integrating javascript is very rewarding, but you can can spend hours trying to get it to work first. next you'll want to embed your javascript into the server control, and call it from an embedded resource.

    Glad your on your way forward, thanks for the anwser mark.

    Friday, May 6, 2011 6:26 PM