CODEWITHSUNDEEP
javascripthtmlclass
user3270936
user3270936

Reputation: 11

Disable a button for 30 seconds

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?

Upvotes: 0

Views: 12462

Answers (7)

Adwin
Adwin

Reputation: 119

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>

Upvotes: 0

saman khademi
saman khademi

Reputation: 842

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

Upvotes: 0

Drkawashima
Drkawashima

Reputation: 9762

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 recommend highlighting the button when it's enabled, perhaps by making it bigger for a moment, using a jquery animation.

Upvotes: 0

Satpal
Satpal

Reputation: 133403

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);
}

Upvotes: 4

Jobin
Jobin

Reputation: 1361

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);
}

Upvotes: -1

SuRaj Creator
SuRaj Creator

Reputation: 975

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>

Upvotes: 2

TestersGonnaTest
TestersGonnaTest

Reputation: 1027

You could try something like this: 

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

Upvotes: 0

Related Questions