CODEWITHSUNDEEP
javascriptasp.net
Coding man
Coding man

Reputation: 967

Clear multiple ASP Textboxes using Javascript on Button Click

I am trying to clear data of multiple ASP Textboxes on clicking Clear button. I was trying with one textbox initially. It is clearing the the textbox data on button-click, but it is also calling the Page_Load method. I want to clear textboxes without calling Page_Load method.

Here is the code, I tried:

<body>
    <form id="form1" runat="server">
                <script type="text/javascript">
                    function Clear() {
                        document.getElementById("<%=txt.ClientID %>").value = "";
                return true;
            }
   </script>
    <div>

        <asp:TextBox ID="txt" runat="server"></asp:TextBox>
        <asp:Button ID="btn" runat="server" Text="click" OnClientClick="return Clear();" />    
    </div>
    </form>
</body>

Upvotes: 0

Views: 927

Answers (1)

Everton Lenger
Everton Lenger

Reputation: 1446

You can avoid page load by changing the return of your function:

function Clear() {
    document.getElementById("<%=txt.ClientID %>").value = "";
    return false;
}

And you can use classes to clear multiple textboxes, like this:

<asp:TextBox ID="txt1" runat="server" CssClass="txts"></asp:TextBox>
<asp:TextBox ID="txt2" runat="server" CssClass="txts"></asp:TextBox>
<asp:TextBox ID="txt3" runat="server" CssClass="txts"></asp:TextBox>
<asp:TextBox ID="txt4" runat="server" CssClass="txts"></asp:TextBox>

And the JS:

function Clear() {
    var txts = document.getElementsByClassName('txts');

    for (var i = 0; i < txts.length; i++)
        txts[i].value = '';

    return false;
}

Hope it helps!

Upvotes: 1

Related Questions