Develop Reference

Disable a button when the one button is pressed, enable after 5 seconds

I have 2 button that load some data, each button take some time to load. so i want to disable the other button for like 10 seconds or until the other button finish rendering.
when one button is clicked, the other button should be disabled for 5 seconds and reenabled after that. how can i do that?
$(function() {
var clicked = false;
var first = $('#but1');
var second = $('#but2');
first.on('click', function() {
clicked = !clicked;
if (clicked)
second.attr('disabled', 'enabled');
else
second.removeAttr('disabled');
});
second.on('click', function() {
clicked = !clicked;
if (clicked)
first.attr('disabled', 'enabled');
else
first.removeAttr('disabled');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="but1">but1</button>
<button id="but2">but2</button>

You can actually make it relative and avoid id's by grouping the buttons. Though, this is just academic. If you're actually waiting for data to load, you should wait until the data is loaded before enabling the button - which is easy enough if you show that code.
$(function() {
$('.toggles button').click(function() {
$('.toggles button').not(this).attr('disabled', 'disabled')
setTimeout(() => {
$('.toggles button').removeAttr('disabled');
}, 5000)
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='toggles'>
<button id="but1"> button 1</button>
<button id="but2"> button 2</button>
</div>

Consider the following example.
$(function() {
var first = $('#but1');
var second = $('#but2');
first.click(function() {
if (!second.prop("disabled")) {
second.prop('disabled', true);
setTimeout(function() {
second.prop("disabled", false);
}, (10 * 1000));
}
});
second.click(function() {
if (!first.prop("disabled")) {
first.prop('disabled', true);
setTimeout(function() {
first.prop("disabled", false);
}, (10 * 1000));
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="but1">but1</button>
<button id="but2">but2</button>
You want to use .prop() to manage element properties such as disabled. Please see: https://api.jquery.com/prop/
You can also use setTimeout() to execute a code snippet after a specific amount of time has passed. See more: https://www.w3schools.com/jsref/met_win_settimeout.asp

How to disable this button for 5 sec after first click?

In my code the button .getmore gets clicked on scroll down. It loads data from database.Works fine. I need to make it disable for 5 sec after every click. How can I set this delay timer?
Or is it possible to disable this function for 5 sec once it fires? Disable the button or disable the function anything will work for me.
$(window).scroll(function(){
if ($(document).height() <= $(window).scrollTop() + $(window).height()) {
// Here how can i set a delay time of 5 sec before next click
$('.getmore').click();
}
});

You can use setTimeout() function of jQuery.
$('.getmore').prop('disabled', true);
setTimeout(function() {
$('.getmore').prop('disabled', false);
}, 5000);

One solution is to use setTimout and disable the button with javascript using document.getElementById("yourButtonID").disabled = true;

You could use a flag inside the clickHandler:
var clickHandler = () => {
if (clickHandler.running)
return
clickHandler.running = true
setTimeout(() => { clickHandler.running = false }, 5000)
console.log(new Date())
}
$('#getmore').click(clickHandler)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='getmore'>more</div>

U can use setTimeout() n after that, put ur disable button function inside it.
setTimeout(document.getElementById('ur_button_id').style.display = 'none', 500);

Prevent anchor click after one click

I am facing one issue, I want to disable anchor click after one click. I have
on-click attribute set in my anchor tag. Below is my HTML
<a style="cursor:pointer;" id="someId" onclick="Myfuntion()">Verify</a>
After I click "Verify" I am changing anchors text to "Verifying..." and one more thing I am trying to disable this anchor to avoid click in between the verification logic going on.
I have tried event.preventdefault() and also added disabled attribute to anchor.
But nothing works.
Please help!

If you were using jQuery for this you could have done this more easly.
Here we add a new class to a link to show that it has been clicked already. We check this when a click is made.
<a style="cursor:pointer;" id="someId">Verify</a>
$('#someId').on('click',function(){
//Check if button has class 'disabled' and then do your function.
if(! $(this).hasClass('disabled')){
$(this).addClass('disabled');
Myfuntion();
$(this).removeClass('disabled');
}
});

Here is a demo as to how it could be done using Javascript.
//Pass the event target to the function
function Myfuntion(elem) {
//If the element has no "data-status" attribute
if (!elem.getAttribute("data-status")) {
//Set attribute "data-status=progress"
elem.setAttribute("data-status", "progress");
//Change the text of the element
elem.textContent = "Verifying...";
//The setTimeout(s) below is only for the demp purpose
//Lets say, your verification process takes 4 seconds
//When complte
setTimeout(function() {
//Remove the attribute "data-status"
elem.removeAttribute("data-status");
//Notify the use that verification is done
elem.textContent = "Verified";
//Again, this is only for demo purpose
setTimeout(function() {
//User may verify again
elem.textContent = "Verify";
}, 1000);
}, 4000);
}
return false;
}
Link to the demo

There are plenty of ways to do this; one simple approach is to just redefine the function itself:
var myFunction = function() {
alert('clicked');
// do whatever your function needs to do on first click, then:
myFunction = function() { // redefine it
// to no-op, or to another action
alert('second click');
}
}
<a onclick="myFunction()">click me</a>

Jquery show div after hiding it onclick after 5 seconds

Hey so I have a div that I want to replaceWith some text after clicking on the button and then re-show the same hidden text after 5 seconds. I am stuck on the part where I need to re-show it. I hid the div with the onclick function and appended some text but after a couple seconds I would like to re-show the original text.
here is the link that I need to change text onclick and then after 5 seconds show the ORIGINAL text...
originally the text says "add to calendar", upon clicking it, it should change to "calendar updated" and then after 5 seconds change back to "add to calendar".
<div class="resSubmitAction download resDetailsButton">
<a href="javascript:void(0);">
</div>
<div class="calText"><p>add to calendar</p></div></a>
</div>
Jquery:
$(document).ready(function () {
$(".resSubmitAction").click(function () {
$(".calText > p").replaceWith("Calendar Updated");
});
});

Make use of the setTimeout function. Fiddle
$("#clickme").click(function(){
var elem = $(this);
setTimeout(function(){
elem.hide();
}, 5000);
});

In the code that you provided, the click event is not attached correctly, if you click 'add to calendar' it doesn't trigger the event.
You can use the setTimeout function to call any function after certain time delay, this is your code with the setTimeout implemented.
Fiddle
$(".calText").click(function () {
var originalText = $(".calText > p").text();
$(".calText > p").text("Calendar Updated");
setTimeout(function(){
$(".calText > p").text(originalText)
}, delayTime);
//Just a little timer I added
triggerTimer();
});

disable button with timeout

I have this form with conditions that alert validation errors before posting data. the problem is if someone double clicks (by mistake perhaps), the form is submitted, then the form is cleared on the first click then the second click will alert 'form empty', which could be confusing as it all happens in a split second. so what I want is to temporarily disable the button when clicked for 3 seconds. but what I have now just times out the whole function for 3 seconds not just disabling the button. how should I be doing this? here is a simplified version of the form. Thanks
$('#send').click(function(){
var self = $('#send');
setTimeout(function() {
self.disabled = false;
if(!$('#text').val()){
alert('field empty');
}else{
$('#message').html('done');
$('#text').val('');
}
}, 3000);
});

I've written a small example for you, of disabling a button on click. The timeout will enable the button after 3000 miliseconds.
Working demo
html:
<input id="text">
<input id="send" type="button" value="send"/>
<div id="message"></div>
Javascript:
$('#send').click(function(){
var button = $(this);
button.attr('disabled', 'disabled');
setTimeout(function() {
button.removeAttr('disabled');
},3000);
if(!$('#text').val()){
alert('field empty');
button.removeAttr('disabled');
}else{
$('#message').html('done');
$('#text').val('');
}
});

You could use jQuery's one() instead of click(). Once the function is run it will be unbound.
If you want to re-enable it you could put the timeout to re-bind it at the end of the function.
Using your method, it looks like you're never actually disabling the button:
this.disabled = 'disabled';

You are not correctly disabling the button. You are setting the .disabled property on a jQuery object, not the wrapped DOM element.
Try:
self.prop('disabled', false);
Instead of:
self.disabled = false;
EDIT:
Actually the code above was attempting to re-ebable the button. There was no code to disable the button.
I also think you want to perform the validation right away. The call to setTimeout() should just be for re-enabling the button, like this:
$('#send').click(function() {
var self = $(this);
// Disable the button.
self.prop('disabled', true);
// Process click.
if (!$('#text').val()) {
alert('field empty');
} else {
$('#message').html('done');
$('#text').val('');
}
// Cause the button to re-enable after 3 seconds.
setTimeout(function() {
self.prop('disabled', false);
}, 3000);
});