setTimeout problem with submit button in form

Jaimok

09-06-2011, 02:20 PM

Hello,

I have two frames, one to the left, one to the right.
The left one contains a form, which I'm using to take in user input, and at the same time to refresh the frame on the right.

The left frame's code is:

<html>
<head>
<script type="text/javascript">
function reload_right_frame()
{
parent.right_frame.location.reload();
}
</script>
</head>

<form method="post">
<input type="submit" value="Enter" onClick="reload_right_frame();">
<input type='text' name='userinput'>
</form>

<?php
echo "You entered: " . $_POST['userinput'];
?>

</html>

This succeeds in spewing out what the user entered, and simultaneously refreshing the right-hand frame.

However, I want there to be a delay in refreshing the right-hand frame, so I changed the left-frame coding as follows:

<html>
<head>
<script type="text/javascript">
function delayed_reload()
{
var t=setTimeout("reloadframe()",3000);
}
function reload_right_frame()
{
parent.right_frame.location.reload();
}
</script>
</head>

<form method="post">
<input type="submit" value="Enter" onClick="delayed_reload();">
<input type='text' name='userinput'>
</form>

<?php
echo "You entered: " . $_POST['userinput'];
?>

</html>

This is where it stops working. The right-hand frame is not reloaded at all. I want it to reload after 3 seconds. The user input text is spewed out, though.

If I change the input type from "submit" to "button", however, the delayed reload of the right-hand frame works fine, but then the user input text fails to show.

How can I make both form and delayed reload both work? I'm probably missing something obvious.

Thanks in advance for any help!

devnull69

09-06-2011, 02:43 PM

If I change the input type from "submit" to "button", however, the delayed reload of the right-hand frame works fine,

No way!

The setTimeout call refers to a function reloadframe() which doesn't even exist!

But anyway, let's assume this is either a typo or a copy/paste flaw. This should be the correct version

function delayed_reload() {
var t=setTimeout(reloadframe, 3000);
return false;
}

function reloadframe() {
parent.right_frame.location.reload();
// assuming there is only one form in the left frame!
document.forms[0].submit();
}

HTML:
<input type="submit" value="Enter" onclick="return delayed_reload();">

Jaimok

09-06-2011, 03:31 PM

Yes sorry, reloadframe() and reload_right_frame() are the same function; I forgot to rename it throughout.

Thanks for the code: now both are working. However, the delay is being applied to both - what I'm really after (and I should have been clearer) is for the form to process straight away, and for the delay only to apply to the right frame refresh.

Could you please suggest how I'd do that? I've tried adapting your snippet but so far no good!

Thanks again.

devnull69

09-06-2011, 03:36 PM

It's not possible to immediately submit a form on the left frame and at the same time (on the same frame) delay the execution of a function. The submission of the form will cause a refresh of the left frame which will destroy all the running timeouts.

Jaimok

09-06-2011, 04:03 PM

I see. Thanks for explaining that. Perhaps there is another way around my main problem, which is this:

The left-hand frame takes in user input via a form, displays something related to it, and also uses it to change a certain session variable. The right-hand frame displays different items depending on the value of this session variable.

This worked, but only about 80% of the time. That is, about 80% of the time, the left-hand frame displayed what it should have done, and the right-hand frame, having received an updated session variable as a result of the user input, displayed what it should have done. However, for the remaining 20%, the left-hand frame did its stuff, but the right-hand side failed to update.

I thought that this could have happened because the onClick instruction to reload the right frame kicked in before the left frame had processed the user input and actually updated the session variable. When I manually refreshed the page, the right frame then displayed what it should.

Do you think this is a feasible reason? Could it be that on some (most) occasions, one bit of code gets to its endpoint faster than another, but not on others, though both pieces remain the same length? Do you have any thoughts on how to circumvent the problem?

Thanks in advance - and for your help so far!

DaveyErwin

09-06-2011, 05:20 PM

II thought that this could have happened because the onClick instruction to reload the right frame kicked in before the left frame had processed the user input and actually updated the session variable. When I manually refreshed the page, the right frame then displayed what it should.

Do you think this is a feasible reason? Could it be that on some (most) occasions, one bit of code gets to its endpoint faster than another, but not on others, though both pieces remain the same length? Do you have any thoughts on how to circumvent the problem?

Thanks in advance - and for your help so far!

Yes what you say is reasonable.
<form method="post" onsubmit="/*call a function in right frame*/;return true;">
<input type="submit" value="Enter" >

function in right frame should call setTimeout to refresh
page after a delay

DaveyErwin

09-06-2011, 05:39 PM

A better answer would be to have the onload function
of left frame call the reload of right frame.

Jaimok

09-06-2011, 06:29 PM

DaveyErwin

09-06-2011, 06:58 PM

Thank you very much - that method of calling a function from the right-hand frame works well. Out of interest, I was able to reduce the setTimeout delay down to 10milliseconds before the occasional misfiring arose.

You really can't rely on any certain time interval,
the web is unpredictable.
You should use something like ...
<body onload="/*code to reload right frame */">
in the left frame.
That way it happens as soon as reliably possible.