javascript: window.close(); after X amount of seconds

Question

I have a pop-up with an onclick action to close the box when the submit button is pressed:

<input type="submit" name="submit" value="submit" onclick="javascript: window.close();">

I'm trying to adapt it to wait 3 seconds after the submit button is clicked to close.

I read an article that suggested using this in the :

<script> 
setTimeout("window.close()",3000) 
</script>

but it closes the pop-up after 3 seconds regardless of whether or not the button is clicked.

How can I adapt it to work with the button?

Solution 1

Your first version works as written

<input type="submit" name="submit" value="submit" onclick="javascript: window.close();">

In that it will close the window when clicked.

Your second version works as written. But you seem a little confused so let me explain a little bit.

<script> 
 setTimeout("window.close()",3000) 
</script>

When this is inlined in your html file then it will execute when it is reached while the view is rendering. When executed, this code says to construct a new Function from the string argument, and then call it in 3000 milliseconds.

It is not tied to anything, it just runs when the rendering engine comes across it.

In order to tie this to something (and not just take the shortcut of placing it on the element as shown in the first version) you will need an event. In javascript, this event will be the click event. In order to access the click event, you need to place a clickeventhandler on the element you wish to handle an event for. And in order to have access to the element you must query the page for it when the DOM is loaded.

querySelectorAll documentation

<script>
window.onload = function(){ //this line of code will wait for the DOM to load
 //once loaded, it will execute the "anonymous" function which is the code here

 //now in here we can find the element
 //since there is no id or class, we can look for an input with name=submit
 var submitInput = document.querySelectorAll("input[name=submit]")[0];

 //once the element is found, we can attach the handler to it
 submitInput.onclick = function(){ //once again this "anonymous" function executes when the event fires
  //in here you can execute the timeout
  //lets use an anonymous function instead of constructing one from a string
  setTimeout(function(){
   window.close();
  },3000);
 };
};
</script>

After doing that, you can remove the onclick event handler from the element

<input type="submit" name="submit" value="submit" />

And there you have it, the best practice approach for your situation.

jQuery

If you are set on using jQuery to do this, you can use the shortcut for the document.ready functionality (as in wait for all the elements to be available) and then in the callback of that shortcut you would target the element (in jQuery you use css-ish selectors) and then tell jQuery to register for the click event, which involves another callback function.

It would look like this:

<script>
 $(function(){//document.ready shortcut
  $("input[name=submit]").click(function(){//target element and request click event
   setTimeout(function(){window.close();},3000);//timeout code to close window
  });
 });
</script>

Solution 2

Just try combining everything:

<input type="submit" name="submit" value="submit" onclick="setTimeout('window.close()',3000);">