2
Answers

Jquery or javascript for button show and hide

Sushant Torankar

Sushant Torankar
Feb 19
96
1

Hello,

I have 2 buttons on page SendOTP and ResendOTP. When clicked on SendOTP button, it should start 2 min timer and should ENABLE ResendOTP button or also can provide sample code of how generally otp works in jquery or javascript.

Also I am looking code for simple CAPTCHA.

I ma working c# asp.net framework

Thanks in advance !

Answers (2)
1
Sangeetha S

Sangeetha S

260 7.3k 316k Feb 20

Using jQuery

First, ensure you include the jQuery library in your HTML:

<script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>

Then, you can use the following jQuery code to show and hide a button:

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Show\/Hide Button<\/title><script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script><\/head><body><button id=\"toggleButton\">Hide Me<\/button><button id=\"actionButton\">Action Button<\/button><script>
$(document).ready(function() {
    $(\"#toggleButton\").click(function() {
        $(\"#actionButton\").toggle(); \/\/ Show\/Hide the action button
    });
});
<\/script><\/body><\/html>
Using Vanilla JavaScript

Here's how you can achieve the same effect using plain JavaScript:

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Show\/Hide Button<\/title><\/head><body><button id=\"toggleButton\">Hide Me<\/button><button id=\"actionButton\">Action Button<\/button><script>
document.getElementById(\"toggleButton\").addEventListener(\"click\", function() {
    var actionButton = document.getElementById(\"actionButton\");
    if (actionButton.style.display === \"none\") {
        actionButton.style.display = \"block\"; \/\/ Show the action button
    } else {
        actionButton.style.display = \"none\"; \/\/ Hide the action button
    }
});
<\/script><\/body><\/html>
Summary
  • jQuery: Use $(\"#element\").toggle(); to easily toggle visibility.
  • Vanilla JavaScript: Use element.style.display to manually change visibility.
1
Eliana Blake

Eliana Blake

677 1.4k 1.2k Feb 19

Absolutely, I can guide you on how to achieve the functionality you described using jQuery or JavaScript.

For the scenario you mentioned with the SendOTP and ResendOTP buttons, you can use the following sample code snippets:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OTP Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<button id="sendOTP">SendOTP</button>
<button id="resendOTP" style="display: none;">ResendOTP</button>

<script>
$(document).ready(function(){
  $("#sendOTP").click(function(){
    // Start a 2-minute timer
    setTimeout(function(){
      $("#resendOTP").prop("disabled", false).show();
    }, 120000); // 2 minutes in milliseconds
  });

  $("#resendOTP").click(function(){
    // Handle ResendOTP functionality here
    alert("Resending OTP...");
  });
});
</script>

</body>
</html>

In this code snippet:

- Clicking on the SendOTP button will trigger a 2-minute timeout, after which the ResendOTP button will be enabled and shown.

- You can enhance the `// Handle ResendOTP functionality here` section inside the `$("#resendOTP").click` function to include the actual resend functionality.

For a simple CAPTCHA implementation, you can explore libraries like Google reCAPTCHA or create a custom implementation based on your requirements. Here is a simple example of a text-based CAPTCHA using JavaScript:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CAPTCHA Example</title>
<script>
function generateCaptcha(){
  var randomNumber = Math.floor(Math.random() * 10000);
  document.getElementById("captcha").innerText = randomNumber;
}

function validateCaptcha(){
  var userInput = parseInt(document.getElementById("captchaInput").value);
  var generatedCaptcha = parseInt(document.getElementById("captcha").innerText);

  if(userInput === generatedCaptcha){
    alert("CAPTCHA validated successfully!");
  } else {
    alert("CAPTCHA validation failed. Please try again.");
  }
}
</script>
</head>
<body>

<p>Please enter the number shown below:</p>
<p id="captcha"></p>
<input type="text" id="captchaInput">
<button onclick="validateCaptcha()">Submit</button>
<button onclick="generateCaptcha()">New CAPTCHA</button>

<script>
generateCaptcha(); // Generate initial CAPTCHA
</script>

</body>
</html>

This code snippet will generate a random number as the CAPTCHA, which the user needs to enter correctly in the input field. Upon submission, a validation check is performed.

I hope this helps you get started with the functionalities you requested. Let me know if you need further assistance or modifications!

Next Recommended Forum