Jquery or javascript for button show and hide

Question

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 !

Sangeetha S · Answer

Using jQuery First, ensure you include the jQuery library in your HTML: Then, you can use the following jQuery code to show and hide a button: Show\/Hide Button Hide Me Action Button $(document).ready(function() { $(\"#toggleButton\").click(function() { $(\"#actionButton\").toggle(); \/\/ Show\/Hide the action button }); }); Using Vanilla JavaScript Here's how you can achieve the same effect using plain JavaScript: Show\/Hide Button Hide Me Action Button 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 } }); Summary jQuery : Use $(\"#element\").toggle(); to easily toggle visibility. Vanilla JavaScript : Use element.style.display to manually change visibility.

Eliana Blake · Answer

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: OTP Example SendOTP ResendOTP $(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..."); }); }); 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: CAPTCHA Example 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."); } } Please enter the number shown below: Submit New CAPTCHA generateCaptcha(); // Generate initial CAPTCHA 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!