locked
Changing button text and color RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-809753952 posted

    I have a button with text "Save Data".

    When user clicks the button the data is saved.

    I want the button text to be changed to "Data Saved" for a few seconds and then back to "Save Data".

    How can I achieve this?

    Thursday, September 27, 2018 6:54 AM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-893317190 posted

    Hi mnmhemaj,

    You could use javascript's function setTimeout to help you .Through this function , you could make a function be called after  a few seconds.

    Below is my code.

    <head runat="server">
    <title></title>
    <script src="../Scripts/jquery-3.3.1.js"></script>
</head>
<body>
    <form id="form1" runat="server">
       

        <asp:Button ID="save" runat="server" Text="Save Data" OnClick="Button1_Click" />
        
    <script>
       
        function action() {
            $("#save").val("Data Saved");
            $("#save").css("background-color", "green");
            setTimeout(function () {
 $("#save").val("Save Data");
               
                $("#save").css("background-color", "rgb(221, 221, 221)");
            }, 5000)  // 5000 represents 5 seconds
        }

    </script>
    </form>

    Code behind

     protected void Button1_Click(object sender, EventArgs e)
        {
            Thread.Sleep(1000);
    // register js code to run after window is loaded
            ScriptManager.RegisterStartupScript(this, this.GetType(), "change", "action()", true);
        }

    The result.

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 27, 2018 9:02 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1952463932 posted

    Use the OnClientClick method to call a javascript function that changes the text, and color (you can even disable the button so the user doesn't click it twice).  The button will then postback to you code where you can save your data and when the page is refreshed the button will return to normal.

    OnClientClick

    <asp:Button runat="server" id="btnSave" Text="Save" OnClientClick="btnSaveOnClick(this)" OnClick="btnSave_OnClick" />

<script type="text/javascript">
    function btnSaveOnClick(sender)
    {
        sender.disabled = true;
        sender.style["background-color"] = "gray";
        sender.value = "Processing . . .";
    }
</script>

    Thursday, September 27, 2018 7:07 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-809753952 posted

    It takes less than one sec to save the data. So I can't see the onClientClick in action. I want to to inform the user that the data is saved just for 5 seconds and then the button text can return to default.

    Thursday, September 27, 2018 8:21 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-893317190 posted

    Hi mnmhemaj,

    You could use javascript's function setTimeout to help you .Through this function , you could make a function be called after  a few seconds.

    Below is my code.

    <head runat="server">
    <title></title>
    <script src="../Scripts/jquery-3.3.1.js"></script>
</head>
<body>
    <form id="form1" runat="server">
       

        <asp:Button ID="save" runat="server" Text="Save Data" OnClick="Button1_Click" />
        
    <script>
       
        function action() {
            $("#save").val("Data Saved");
            $("#save").css("background-color", "green");
            setTimeout(function () {
 $("#save").val("Save Data");
               
                $("#save").css("background-color", "rgb(221, 221, 221)");
            }, 5000)  // 5000 represents 5 seconds
        }

    </script>
    </form>

    Code behind

     protected void Button1_Click(object sender, EventArgs e)
        {
            Thread.Sleep(1000);
    // register js code to run after window is loaded
            ScriptManager.RegisterStartupScript(this, this.GetType(), "change", "action()", true);
        }

    The result.

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 27, 2018 9:02 AM