Wait x seconds and show a Ubmit

Asked

Viewed 21,104 times

2

Is there any of when a user enters a page, Javascript wait 20 seconds and after waiting those 20 seconds show a Submit in real time?

That is, the user would enter the page, wait 20 seconds, after waiting those 20 seconds in real time on the page appeared the Submit.

javascript

  • Leave a button type Submit Hidden and use the Javascript settimeinterval function by spending time in ms to remove the Hidden from the button

  • If the answer solved the problem, mark it as accepted. See http://meta.pt.stackoverflow.com/questions/1078/como-e-por-que-aceitar-uma-resposta/1079#1079

3 answers

8

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

In HTML

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

In Javascript

  • $('#idSubmit') - represents the selector of its element
  • .show() - represents the function that in the case is to display
  • 3000 is the time in milliseconds that Voce wants to wait, I kept a time of 3 seconds for the example does not take long but Voce can put as much time as 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>

<form id="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>

4

Is there any of when a user enters a page, Javascript wait 20 seconds and after waiting those 20 seconds show a real-time Submit?

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

It is important to pay attention to the fact that the parameter delay is represented in milliseconds as described below:

delay is the number of milliseconds (thousandths of a Second) that the Function call should be delayed by. If omitted, it defaults to 0. The actual delay may be longer; see Notes Below.

Let’s assume you have a function with the name 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">

3

In the example below, I use Jquery due to the use of the ready function().

Everything inside this function will be executed only after loading all page objects.

This is necessary to avoid de-synchronization between executions.

<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>
<script type="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>
  • 1

    A correction in the explanation: the use of the function $.ready is not necessary to avoid desynchronization. In your particular example, it should be used for the simple fact that your button is below the script block. Without using the $.ready in this case, the script would be executed even before the button exists.

  • Exactly by the way I presented it, if necessary. There are different ways to do it. Without the ready, there is a risk of settimeout firing before all elements load. The risk is small, but anyway it is a risk.

  • particularly prefer not to put scripts out of the head, especially on the body.. leaves the code aesthetically "dirty", but it does not mean that one is more certain than another. It is a matter of the programmer’s choice and patterns under which to work.

  • therefore, I disagree with your comment, as it puts the comment as if it were a correction of an error. But there is no error. It is a mistaken comment.

  • I recommend reading the following materials: Best Practices for Speeding Up Your Web Site and Where is the best place to put <script> tags in HTML Markup?

  • I’ve been dealing with the web since 1998.. it’s even a joke to tell me about it.. In fact, right here in SO-pt there’s a topic on the subject.. Since you brought it up, there is no better place to use script tags. It depends on each case. Unfortunately many interpret X recommendations for Y case incorrectly or to the letter and creates this myth that it should be so, with scripts in the body or at the end of the </html>.. Myths based on misinterpretation and dissemination of erroneous or misguided information.. An example of misconception, your comment here..

Show 1 more comment

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.