0

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?

2
  • Thanks everyone. I used one that seems to be deleted now but it worked: 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> Feb 4, 2014 at 14:10

7 Answers 7

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);
}
4
  • OP says s/he can't change the HTML.
    – Andy
    Feb 4, 2014 at 13:25
  • Can't change the html in any way. I can't add to it either. I got one of the answers to work but unfortunately I think they deleted their answer. Feb 4, 2014 at 14:24
  • @user3270936, I have provided both options, didn't you noticed that
    – Satpal
    Feb 4, 2014 at 15:35
  • couldn't you just refresh the page and the timeout would go away? Jun 16, 2017 at 16:09
2

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>
0

You could try something like this:

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

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.

0

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

2
  • OP says s/he can't change the HTML.
    – Andy
    Feb 4, 2014 at 13:25
  • it's use document.getElementsByName Feb 4, 2014 at 13:32
0

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>

-1

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.