asp.net - How to clear textbox in javascript that contains value of gridview row editing - Stack Overflow

admin管理员组

文章数量:1406918

I have following ASP controls: a textbox , a gridview, an update button, and a reset button.

When I click on the row editing button of a gridview row, then it fills the corresponding value in the textbox.

My problem is that when I click on the reset button, it does not clear the textbox value that es from the gridview row.

function btnReset_onclick() {
   document.getElementById("<%= txtDescription.ClientID %>").value = "";
}

protected void GridViewExpenses_RowEditing(object sender, GridViewEditEventArgs e)
{
     lblExpenseDesc = GridViewExpenses.Rows[e.NewEditIndex].FindControl("lblDescription") as Label;
     txtDescription.Text = lblExpenseDesc.Text;
}

How can I clear the textfield?

I have following ASP controls: a textbox , a gridview, an update button, and a reset button.

When I click on the row editing button of a gridview row, then it fills the corresponding value in the textbox.

My problem is that when I click on the reset button, it does not clear the textbox value that es from the gridview row.

function btnReset_onclick() {
   document.getElementById("<%= txtDescription.ClientID %>").value = "";
}

protected void GridViewExpenses_RowEditing(object sender, GridViewEditEventArgs e)
{
     lblExpenseDesc = GridViewExpenses.Rows[e.NewEditIndex].FindControl("lblDescription") as Label;
     txtDescription.Text = lblExpenseDesc.Text;
}

How can I clear the textfield?

• javascript
• asp
• asp-3.5
• asp-4.0

Share Improve this question Follow edited Sep 10, 2011 at 18:35 Charles 51.5k1313 gold badges106106 silver badges144144 bronze badges asked Jul 4, 2011 at 10:40 Kunal SobtiKunal Sobti 2111 gold badge11 silver badge22 bronze badges 2

• Are you actually using ASP.NET 3.5 or 4.0, or really both of them? – Paŭlo Ebermann Commented Jul 4, 2011 at 12:55
• Where is your reset button? Is it standard 'cancel' button of grid edit element form? Or do you have EditTemplate in your grid and you have your own asp:button there? Or is the button written outside of the grid altogether? To be honest we need to see some of your aspx code to help you. Otherwise it is like asking someone how to fix your car without telling them what car it is... – Daniel Gruszczyk Commented Jul 4, 2011 at 15:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

<script type="text/javascript">
    function clearTextBox() {
        document.getElementById('<%= txtTest.ClientID %>').value = "";
    }
</script>
<asp:TextBox ID="txtTest" runat="server" Text="blah blah blah" />
<input type="button" value="Clear" onclick="clearTextBox()" />

That works for me...

UPDATE:

Remove the default edit button of the grid (remove the ShowEditButton="True" of CommandField) and add a link button inside another itemTemplate. Also set the CommandName attribute of edit link button to edit and (this will help the edit button to work as the default edit of the grid). Then call the javascript on edit link button's OnClientClick event and perform your logic there. Also place two other link buttons for update and cancel, should be placed inside an EditItemTemplate and CommandName attribute for each of them should be set to update and cancel correspondingly..

Refer code below to see the implementation,

Aspx Section,

     <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowCancelingEdit="GridView1_RowCancelingEdit"
        OnRowUpdating="GridView1_RowUpdating" OnRowEditing="GridView1_RowEditing">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <%# Eval("sample1")%>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="txtValue" runat="server"></asp:TextBox>
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton ID="lnkBtnEdit" runat="server" Text="Edit" CommandName="edit" OnClientClick="return ClearText(this.id)"></asp:LinkButton>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:LinkButton ID="lnkBtnUpdate" runat="server" Text="Update" CommandName="update"></asp:LinkButton>
                    &nbsp;
                    <asp:LinkButton ID="lnkBtnCancel" runat="server" Text="Cancel" CommandName="cancel"></asp:LinkButton>
                </EditItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

Java Script section,

 <script language="javascript" type="text/javascript">
    function ClearText(btnID)
    { 
        var txtID=btnID.replace("lnkBtnEdit","txtValue");          
        var txtValue=document.getElementById(txtID);            
        
        alert(txtID);
         
        txtValue.value="";
        
        return true;
    }
</script>

code behind,

    protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
    {
        GridView1.EditIndex = -1;
        populate();
    }

    protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
    {
        //do update logic here
        GridView1.EditIndex = -1;
        populate();
    }

    protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
    {
        GridView1.EditIndex = e.NewEditIndex;
        populate();
    }

Hope this helps you...

本文标签： aspnetHow to clear textbox in javascript that contains value of gridview row editingStack Overflow