Retrieve a TextBox using JavaScript

Question

I have a GirdView in Edit Mode with inside a TextBox.

I need to Retrieve this TextBox with ID (from the source code in the browser) in JavaScript.

ctl00$MainContent$uxListOptions$ctl02$uxValueInput

But I receive an error because my JavaScript is not able to find the TextBox.

Here is the code:

   <span onclick="encodeMyHtml('<%# UniqueID.Replace("$", "_") %>_FormViewContentManager_ContentTextBox')">
        <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="[Publish]" />
    </span>

In my control’s OnPageLoad I call this:

private void addEditorJavaScript()
{
    // create our HTML encoder javascript function
    // this way it shows up once per page that the control is on
    string scr = @"<script type='text/javascript'>function encodeMyHtml(name){
                var content = document.getElementById(name).value
                content = content.replace(/</g,'<');
                content = content.replace(/>/g,'>');
                document.getElementById(name).value = content;
            }</script>";

    // add the javascript into the Page
    ClientScriptManager cm = Page.ClientScript;
    cm.RegisterClientScriptBlock(this.GetType(), "GlobalJavascript", scr);
}

I am trying to use this code http://dustyreagan.com/how-to-submit-html-without-disabling/

Any Idea what am I doing wrong? Thanks guys!

First of all, replace UniqueID.Replace("$", "_") with ClientID. Won't fix your problem, but it looks better and is less prone to failure in case conventions should change. — David Hedlund
– David Hedlund, Commented Jan 3, 2011 at 8:08
Hello, from the Browser Source I can see the TextBox which Iam interested as textarea name="ctl00$MainContent$uxListOptions$ctl02$uxValueInput" rows="2" cols="20" id="MainContent_uxListOptions_uxValueInput_0" class="mceEditor"> <p>ciao</p></textarea> — GibboK
– GibboK, Commented Jan 3, 2011 at 8:10

Victor Haydin · Accepted Answer · 2011-01-03 08:14:24Z

1

If you are using ASP.Net 4.0, you could use ClientIdMode=Static or Predictable for this control.

answered Jan 3, 2011 at 8:14

Victor Haydin

3,5582 gold badges28 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David Hedlund · Accepted Answer · 2011-01-03 08:11:29Z

0

encodeMyHtml('<%# UniqueID.Replace("$", "_") %>_FormViewContentManager_ContentTextBox')

This will result in

encodeMyHtml('ctl00_MainContent_uxListOptions_ctl02_uxValueInput_FormViewContentManager_ContentTextBox')

Does a control of that ID exist in your DOM?

It seems that you're making a lot of assumptions as to how the ID's will be created. It would be better to immediately reference the ContentTextBox.ClientID.

Something like the following, provided that ContentTextBox is a valid reference to the text box:

encodeMyHtml('<%# ContentTextBox.ClientID %>')

answered Jan 3, 2011 at 8:11

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

1 Comment

GibboK Over a year ago

Hi, how can i check id ID exist in DOM?

Andrew Barber · Accepted Answer · 2013-10-14 14:25:16Z

You can define your grid like this :

 <div>
   <asp:GridView ID="GridView1" runat="server"  Width = "550px"
    AutoGenerateColumns = "false" Font-Names = "Calibri" 
    Font-Size = "12pt" HeaderStyle-BackColor = "LightYellow" AllowPaging ="true"  ShowFooter = "true"  OnPageIndexChanging = "OnPaging" PageSize = "10" >
   <Columns>
      <asp:TemplateField ItemStyle-Width = "100px"  HeaderText = "Name">
        <ItemTemplate>
         <asp:TextBox ID="txtPeriod" runat="server" CssClass="css1 mycss" Text='<%# Eval("Period")%>' 
             onblur="SetPostingPeriod(this)"></asp:TextBox>
        </ItemTemplate>                       
    </asp:TemplateField>   
   </Columns> 
   <AlternatingRowStyle BackColor="#C2D69B"  />
</asp:GridView> 
</div>

And your Javascript Function Would be :

<script language="javascript" type="text/javascript">
     /* Populating same data to all the textboxes inside grid, 
     once change of text for one textbox - by using jquery
     */
     function SetPostingPeriod(obj) {

         var cntNbr = $("#" + obj.id).val();
      // var cntNbr = document.getElementById(obj.id).value;
      // alert(cntNbr);

         //Access Grid element by using name selector
         $("#<%=GridView1.ClientID %> input[name*='txtPeriod']").each(function (index) {

             if ($.trim($(this).val()) != "")
                 if (!isNaN($(this).val())) {
                     $(this).val(cntNbr);
                 }
         });
     }
 </script>

This Javascript function is called onblur event of the textbox. When this function is called at the same time it passes a parameter which is nothing but the textbox id.

Inside javascript function by using the parameter which is the id of the textbox we are getting the vaue.

Here is the code :

      var cntNbr = $("#" + obj.id).val();

Then For each of the "txtPeriod" controls available inside the grid, we need to assign the value of current "txtPeriod" textbox value to them.

Looping Grid to identify each "txtPeriod" available : Here is the code :

 $("#<%=GridView1.ClientID %> input[name*='txtPeriod']").each(function (index) {

 });

Inside this loop we need to assign the "txtPeriod"(current/Modified) value to other "txtPeriod" textboxes.Before assign its good practice to check is it null or NAN.

Here is the code :

               if ($.trim($(this).val()) != "")
                 if (!isNaN($(this).val())) {
                     $(this).val(cntNbr);
                 }

Collectives™ on Stack Overflow

Retrieve a TextBox using JavaScript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related