Wait for x seconds and show a submit

Navigation
1

Is there any when a user enters a page, does the JavaScript wait 20 seconds, and after waiting for those 20 seconds to show a submit in real time?

In other words, the user would enter the page, wait 20 seconds, then wait for those 20 seconds in real time on the submit page.

    
asked by anonymous 10.10.2015 / 13:56

3 answers

6

You can use the setTimeout() and jQuery function to solve your problem easily.

No HTML

  • style="display:none" - will make button invisible at startup

In JavaScript

  • $('#idSubmit') - represents the selector of your element
  • .show() - represents the function that in the case is display
  • 3000 is the time in milliseconds that you want to wait, I kept a time of 3 seconds for the example, it does not take long but you can put the time that you want 20 seconds would be 20000

See the code below 

$('#idSubmit').hide();

setTimeout(function(){ 
    $('#idSubmit').show();
}, 3000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formid="id" >
    First name:<br>
    <input type="text" name="firstname"> <br>
    
    Last name:<br> 
    <input type="text" name="lastname"> <br>
     
    <input id="idSubmit" type="submit" />
</form>
    
10.10.2015 / 14:18
4
  

Is there any of when a user enters a page, does the JavaScript wait 20 seconds and after waiting for those 20 seconds to show a submit in real time?

To execute a function after a certain time, use the function .setTimeout(callback, delay) .

It is important to note that the delay parameter is represented in milliseconds, as described below:

  

delay is the number of milliseconds (thousandths of a second) that the call function should be delayed by. If omitted, it defaults to 0. The current delay may be longer; see Notes below.

Suppose you have a function named minhaFuncao , and want to run it after 20 seconds. In this case you would use the following syntax: 

setTimeout(minhaFuncao, 20000);

Example 

function showSubmit() {
  document.getElementById('submit-btn').style.display = 'block';
}

setTimeout(showSubmit, 2000);
#submit-btn {
  display: none;
}
<input type="submit" id="submit-btn">
    
10.10.2015 / 14:19
3

In the example below, I use JQuery because of the use of the ready () function.

Everything within this function will only run after loading all the objects on the page.

This is necessary to avoid unsynchronization between runs. 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><scripttype="text/javascript">
$().ready(function() {

/**
Tempo em segundos
*/
seconds = 20;

/**
Oculta o botão.
Alternativamente, pode ocultar com CSS também.
*/
$("#btn").hide();

/**
A função setTimeout() cria o delay de execução.
O tempo é medido em milisegundos, por isso, multiplimos por 1000.
*/
setTimeout(function(){$("#btn").show();}, seconds*1000);

});
</script>
</head>
<body>

botão aparece aqui: 
<input type="submit" value="ok" id="btn" />

</body>
</html>
    
10.10.2015 / 14:16
Calculation of tenths of a second How to keep the footer always down