Share via

How to use onclientclick with asp:FileUPload

Coreysan 1,811 Reputation points
2024-02-02T20:02:10.1566667+00:00

Regarding classic asp.net, I use fileupload. When the button is clicked, is there also a way to fire another event as well, like clearing an asp:label?

Developer technologies .NET Other
Developer technologies ASP.NET Other

2 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Albert Kallal 5,586 Reputation points
    2024-02-02T22:23:00.7866667+00:00

    You can code like this:

                <asp:FileUpload ID="FileUpload1" runat="server" />

            <asp:Button ID="cmdUpLoad" runat="server" Text="UpLoadFile"
                OnClick="cmdUpLoad_Click"
                OnClientClick="changemylabel();return true"
                />
            <br />
            <br />
            <asp:TextBox ID="TextBox1" runat="server" ClientIDMode="Static"
                style="border-color:transparent" 
                ></asp:TextBox>

            <script>
                function changemylabel() {
                    mytbox = document.getElementById("TextBox1")
                    mytbox.value = "The text is changed when upload button hit"
                }
            </script>

    But why did I use a text box in place of a label? Well, a label does not preserve its view state when you hit the upload button (a post back) due to client side changes (but server side it does!!!). Thus, when the file up-loads, and page cycle completes, then the value of what you changed client side code wise to the label will be lost. In other words, changing the label with client side JavaScript will not persist. However, with a text box, they are designed to accept changes client side (by you typing, or by JavaScript code changing the value of that text box). Hence, I used a text box, since I wanted the value changed by JavaScript to survive the post-back (page round trip). However, if you wanted to clear the label when you hit upload (and it will clear client side), then on server side code in your upload button code stub, you also have to clear the label, since as noted changes to a label ONLY go into viewstate with server side code, and not client side code.

    0 comments
  2. Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff
    2024-02-05T05:17:57.9066667+00:00

    Hi @Coreysan,

    How to use onclientclick with asp:FileUPload

    Button.OnClientClick Property:Gets or sets the client-side script that executes when a Button control's Click event is raised.

    You can refer to the following code to clear Lable.

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function clearLabelValue() {
            var lbl = document.getElementById('<%=lblMessage.ClientID%>');
            lbl.innerText = "";
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:FileUpload ID="FileUpload1" runat="server" />
            <hr />
            <asp:Button ID="btnUpload" Text="Upload" runat="server" OnClick="UploadFile" OnClientClick="clearLabelValue();return false;" />
            <br />
            <asp:Label ID="lblMessage" runat="server" Text="test" />
        </div>
    </form>
</body>
</html>

    Best regards,
    Lan Huang

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.