Question

I have a form where the submit button triggers a function. Let’s call it ycClick(). I need this function to be disabled for 30 seconds after submit but I need the submit button to continue to work. I do not want want to disable the entire button, just the function it triggers. (If the user hits the button again before 30 seconds I need it to submit again, but not execute ycClick() a second time.) I’ve tried a million different things but to no avail. Finally I feel like I’m getting close, but for some reason it’s still not working. When I click on it ycClick() isn’t executing at all. What am I doing wrong? Here’s what I got:

function ycClick(){
    ...
}



function toggleSubmit() {
    if (document.getElementById('ycsubmit').onclick == null) {
        document.getElementById('ycsubmit').onclick = ycClick();
    } else {
        document.getElementById('ycsubmit').onclick = null;
    } 
} 


function timer()
{

  if (count <= 0 || count == null)
  {
  ycClick();
  } else {
  count=30;
  counter=setInterval("timer()",1000);
  count=count-1;
 toggleSubmit();
}
}

<FORM ID="myform">
    <INPUT ID="ycsubmit" TYPE="SUBMIT" ONCLICK="timer();">
</FORM>

Answer 1

This should toggle the button:

var isEnabled = true;

function toggleSubmit() {
    if (isEnabled) {
        document.getElementById("ycsubmit").onclick = function() {};
    } else {
        document.getElementById("ycsubmit").onclick = ycClick;
    } 

    isEnabled = !isEnabled;
}

Also, when you used setInterval you don’t need the parentheses or quotes for timer, like so:

counter=setInterval(timer,1000);

And better yet, if you want to wait 30 seconds, just toggle the button’s functionality, and then 30 seconds later do it again.

toggleSubmit();
setTimeout(toggleSubmit(), 30000);