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!

Answer 1

如果使用的是ASP.Net 4.0，则可以对此控件使用ClientIdMode = Static或Predictable。

Answer 2

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);
                 }

Answer 3

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 %>')