Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    setTimeout problem with submit button in form

    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:

    Code:
    <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:

    Code:
    <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!

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Quote Originally Posted by Jaimok View Post
    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
    Code:
    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();">

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    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.

  • Users who have thanked devnull69 for this post:

    Jaimok (09-06-2011)

  • #5
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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!

  • #6
    Regular Coder
    Join Date
    Aug 2010
    Posts
    967
    Thanks
    19
    Thanked 211 Times in 209 Posts
    Quote Originally Posted by Jaimok View Post
    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
    Last edited by DaveyErwin; 09-06-2011 at 05:33 PM.

  • Users who have thanked DaveyErwin for this post:

    Jaimok (09-06-2011)

  • #7
    Regular Coder
    Join Date
    Aug 2010
    Posts
    967
    Thanks
    19
    Thanked 211 Times in 209 Posts
    A better answer would be to have the onload function
    of left frame call the reload of right frame.

  • #8
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Regular Coder
    Join Date
    Aug 2010
    Posts
    967
    Thanks
    19
    Thanked 211 Times in 209 Posts
    Quote Originally Posted by Jaimok View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •