javascript - Disable a button for 30 seconds - Stack Overflow

admin管理员组

文章数量:1394611

I have a button (where I can't change any of the HMTL) that clicks to save an answer to a question.

I want to disable this button for 30 seconds so that they cannot answer the question unless 30 seconds has passed. I don't know much javascript but I was told this can be used to do this.

Here is the html code that I cant change in any way:

<input type="submit" class="btnLarge" value="Submit" name="submit">

I thought maybe I can use the getElementByClassName but I'm not sure how that will be called. Can anyone help?

I have a button (where I can't change any of the HMTL) that clicks to save an answer to a question.

I want to disable this button for 30 seconds so that they cannot answer the question unless 30 seconds has passed. I don't know much javascript but I was told this can be used to do this.

Here is the html code that I cant change in any way:

<input type="submit" class="btnLarge" value="Submit" name="submit">

I thought maybe I can use the getElementByClassName but I'm not sure how that will be called. Can anyone help?

• javascript
• html
• class

Share Improve this question Follow asked Feb 4, 2014 at 13:14 user3270936user3270936 1111 gold badge22 silver badges33 bronze badges 2

• Thanks everyone. I used one that seems to be deleted now but it worked: – user3270936 Commented Feb 4, 2014 at 14:10
• <script type="text/javascript" > window.onload = function() { var btn = document.getElementsByName('submit')[0]; btn.disabled = true; setTimeout(function(){btn.disabled = false;}, 30000); }; </script> – user3270936 Commented Feb 4, 2014 at 14:10

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 4

Starts with your button disabled, Notice added disabled attribute

HTML

<input type="submit" class="btnLarge" value="Submit" name="submit" disabled>

JavaScript

If you can't change HTML

 document.getElementsByName("submit")[0].disabled = true;   

To enable after 30 seconds

Here use setTimeout, to enable it after 30 seconds. In the anonymus function of setTimeout.

To identify element you can use document.getElementsByName, it returns a list of elements with a given name in the (X)HTML document. Thus to access first element [0] is used

Modify the DOM property is also called disabled and is a boolean that takes true or false.

setTimeout(function(){  
    var element = document.getElementsByName("submit")[0] ;
    element.disabled = false;
}, 30000);

Complete Code

window.onload = function(){
    document.getElementsByName("submit")[0].disabled = true;
    setTimeout(function(){  
        var element = document.getElementsByName("submit")[0] ;
        element.disabled = false;
    }, 30000);
}

Try this

  <script type="text/javascript">
        setTimeout (function(){
        document.getElementById('submitButton').disabled = null;
        },30000);

        var countdownNum = 30;
        incTimer();

        function incTimer(){
        setTimeout (function(){
            if(countdownNum != 0){
            countdownNum--;
            document.getElementById('timeLeft').innerHTML = 'Time left: ' + countdownNum + ' seconds';
            incTimer();
            } else {
            document.getElementById('timeLeft').innerHTML = 'Ready!';
            }
        },1000);
        }
    </script>

 <form>
        <input type="submit" disabled="disabled" id="submitButton" />
        <p id="timeLeft">Time Left: 30 seconds</p>
    </form>

You could try something like this:

var element = document.getElementById('submitBtn');
element.disabled = true;
setTimeout(function(){
    element.disabled = false;
}, 30000);

I would create a re-usable function that takes the specified amount of time and the className as inputs.

function disableElementForSpecifiedTime(className, disabledTime_milliseconds)
{
    var element = document.getElementsByClassName(className)[0];
    element.disabled = true;

    setTimeout(function(){  
        element.disabled = false;
    }, disabledTime_milliseconds);
}

Call it like this

disableElementForSpecifiedTime("btnLarge", 3000)

In the name of usability I would remend highlighting the button when it's enabled, perhaps by making it bigger for a moment, using a jquery animation.

try this
in javasript

var i=0;
document.getElementsByName('submit')[0].setAttribute("disabled","disabled");
    window.onload = function() {
        window.setTimeout(setdis, 30000);
    }
    function setdis() {
        if(i==0)
        {
           document.getElementsByName('submit')[0].disabled = false;
           i++;
        }
    }

good luck

Add the attributes disabled and id="submit-form" to your button.

window.setTimeout(setEnabled, 30000);

function setEnabled() {
  var submitButton = document.getElementById('submit-form');
  if (submitButton) {
    submitButton.disabled = false;
  }
}

<input type="submit" class="btnLarge" value="Submit" name="submit" id="submit-form" disabled>

As you can't change the html, you can use javascript functions. Give an id to your button. Make it disabled on page load.

<input type="submit" class="btnLarge" value="Submit" name="submit" disabled="disabled" id="saveAns">

Then you can use a timer function to enable it after 30 seconds

<script type="text/javascript">
window.onload=function() { setTimeout(function()
{
    document.getElementById('saveAns').disabled = false;},30000);
}

本文标签： javascriptDisable a button for 30 secondsStack Overflow