user1605859 user1605859 - 6 months ago 25
Vb.net Question

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

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>

Answer

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>jacascript</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>