Having a delayed action after clicking a form

Question

I have the following code to open a form in a popup window. I want to, after clicking the submit button, have an alert popup after 1250 milliseconds. This does not currently work as the page gets redirected to the result of submitting the form.

<?php
$blah = "Well"; $test = "Done";
echo '<script type="text/javascript" src="fetchlayers.js"></script>';
$formcode = "<form action=\"process.php\" method=\"post\" enctype=\"multipart/form-data \"><label for=\"file\">Filename:</label><input type=\"file\" name=\"file\" id=\"file\"/> <br /><input type=\"submit\" name=\"submit\" value=\"Submit\" onclick=\"setTimeout(function() { alert('$blah'); },1250);\" /></form>";


echo "<h1>hello</h1>
<div id='form'>
<a href='#' onclick=\"createpopup('" . htmlentities($formcode) . "'); return false;\">
click here</a>
</div>";

What would be the best way to have a delayed action after submitting a form?

Answer 1

try to use document.form.submit() inside the timer callback rather than using a submit button

Answer 2

If I understand correctly, you want to open a pop-up containing a form, then after submitting the form, show an alert box?

Try using window.opener in your setTimeout() callback. This way you can tell the original window to display the alert box - it shouldn't matter that your pop-up page has been redirected.

Answer 3

What would be the best way to have a delayed action after submitting a form?

You simply cannot perform those two operations in that order from the same window. As soon as the form submits you are effectively leaving the state of the current page behind and asking for a new resource.

From your popup you will have a reference to the parent window. When the user wants to submit the form, you can call some JavaScript to execute a delayed action in the parent window, and then allow the form in the popup to submit.

EDIT: Based on your comment here is a way to communicate between windows; you can have a simple setup like this:

<!-- parent.html -->
<input type="button" onclick="doOpenChild();" value="Spawn Child Window" />

<script type="text/javascript">
  function doOpenChild() {
    window.open(
      "child.html",
      "child"
    );
  }

  function doSomething() {
    setTimeout(
      function(){
        alert(fileINeedToCheck);
      },
      2000
    );
  }

  // Set variable for child to update...
  window.fileINeedToCheck = "unset";
</script>

Spawn a popup with something like this:

<!-- child.html -->
<form action="/someaction.php" name="childForm" onsubmit="communicateWithParent(this);">
  <input type="text" name="fileName" value="100" />
  <input type="submit" value="Submit" />
</form>

<script type="text/javascript">
  function communicateWithParent(aForm) {
    if(window.opener) {
      if(window.opener.fileINeedToCheck) {
        window.opener.fileINeedToCheck = aForm.fileName.value;

        // You can also call functions from the parent window...
        window.opener.doSomething();
      }
    }
  }
</script>

The parent window's variable can be updated with values from the child window.