How to use Button's OnClientClick property to run some multiple JavaScript functions in ASP.NET?

Question

How to run multiple JavaScript functions in ASP.NET to insert a desired text in a TextBox, Set the TextBox back color and font color and also disable or lock the Button for 5 second? I tried below code but I need client side code:

VB.NET code:

Protected Sub btnClickTest_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnClickTest.Click
    txtTest.BackColor = Drawing.Color.Yellow
    txtTest.ForeColor = Drawing.Color.Red
    txtTest.Text = "You Clicked the Button!"
    btnClickTest.Enabled = False
    System.Threading.Thread.Sleep(5000)
    btnClickTest.Enabled = True
End Sub

html:

<html>
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server"> 
<div>
    <asp:Button ID="btnClickTest" 
        runat="server" 
        Text="Click Me" />        
<br />  <br />
</div>  
<asp:TextBox ID="txtTest" 
    runat="server"></asp:TextBox>  
</form>
</body>
</html>

luchaninov · Accepted Answer · 2016-05-27 20:10:24Z

The solution:

html:

<html >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server"> 
<div>
    <asp:Button ID="btnClickTest" 
        runat="server" 
        Text="Click Me" 
          onclientclick="desiredFunction(); lockoutSubmit(this); return false;" />        
<br /> <br />
</div>  
<asp:TextBox ID="txtTest" 
    runat="server"></asp:TextBox>   
</form>
</body>
</html>

javascript:

  <script type="text/javascript">
  function desiredFunction() {
      var TextBox = document.getElementById("txtTest");

      //  1- Is used to insert desired text in the TextBox:
      TextBox.value = "You Clicked the Button!";

      //  2- Is used to set your TextBox back color to yellow:
      TextBox.style.backgroundColor = "yellow";

      //  3- Is used to set your TextBox font color to red:
      TextBox.style.color = "red";
  }

  //  4- Use this function to disable or lock your button for 5 seconds:
  function lockoutSubmit(button) {
      button.style.color = "blue";
      var oldValue = button.value;
      var i = 5; //variable for to count the seconds
      var interval = setInterval(function () {
          button.setAttribute('disabled', true);
          i -= 1;
          button.value = 'Wait ' + i + ' Seconds!';
      }, 1000)



      setTimeout(function () {
          clearInterval(interval); //drop the interval
          button.value = oldValue;
          button.removeAttribute('disabled');
          button.style.color = "black";
      }, 5000)
    }
 </script>

Or just in the html mode(Not ASP.NET)

function desiredFunction() {
          var TextBox = document.getElementById("txtTest");

          //  1- Is used to insert desired text in the TextBox:
          TextBox.value = "You Clicked the Button!";

          //  2- Is used to set your TextBox back color to yellow:
          TextBox.style.backgroundColor = "yellow";

          //  3- Is used to set your TextBox font color to red:
          TextBox.style.color = "red";
      }



      //  4- Use this function to disable or lock your button for 5 seconds:
      function lockoutSubmit(button) {
          button.style.color = "blue";
          var oldValue = button.value;
          var i = 5; //variable for to count the seconds
          var interval = setInterval(function () {
              button.setAttribute('disabled', true);
              i -= 1;
              button.value = 'Wait ' + i + ' Seconds!';
          }, 1000)

          setTimeout(function () {
              clearInterval(interval); //drop the interval
              button.value = oldValue;
              button.removeAttribute('disabled');
              button.style.color = "black";
          }, 5000)
      }

<html>
<head>
    <title>JavaScript</title>
</head>
<body>
    <div>
        <input
            id="btnClickTest"
            type="button"
            value="Click Me" onclick="desiredFunction(); lockoutSubmit(this);" />       
        <br /> <br/>
    </div>
    <input
        id="txtTest"
        type="text" />
 </body>
</html>

Collectives™ on Stack Overflow

How to use Button's OnClientClick property to run some multiple JavaScript functions in ASP.NET?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related