10

Edit: What I really need to know is if there is any javascript event that will reliably fire when the user arrives at the page via the back button. I tried the onload event for the body element, but it doesn't fire on Firefox or Safari.

I'm working with some old code that tries to prevent double-submission of form data by disabling all form submission buttons as soon as the user clicks one (by listening to the form's onSubmit event). This code is applied to every form in the app, regardless of whether double-submission would even be a problem.

The problem is that if the user hits the back button in Firefox or Safari, all the submit buttons are still disabled when he gets to the page. On Firefox, they are even disabled after a refresh (only a Ctrl+F5 refresh will do it)!

I've tried listening to body's onLoad event, but FF and Safari don't fire that when you get to the page via back button. (Interestingly, it is fired on a soft refresh on FF, even though the button stays disabled.)

Here's a very simple HTML doc that will show what I mean:

<html><body>
<form name="theForm" id="theForm" action="test2.html"
      onSubmit="document.theForm.theButton.disabled = true;">
  <input id="theButton" type="submit" name="theButton" value="Click me!" />
</form>
</body></html>

Note: I've tested on WinXP with IE8, FF3.5, Safari 4, Opera 9, and Chrome 2.0. Only Safari and FF leave the button disabled when you use back to get to them.

Kip
  • 107,154
  • 87
  • 232
  • 265
  • yes, i added a comment below (sorry, i was doing this at work and it was time to go home) – Kip Jul 16 '09 at 03:19
  • Duplicate of http://stackoverflow.com/questions/54539/prevent-use-of-the-back-button-in-ie and many, many others. Search http://stackoverflow.com/search?q=back+button – John Saunders Jul 16 '09 at 04:51
  • 1
    well i don't think it's exactly a duplicate. i did search first, and saw most of those questions. most of them are about preventing use of the back button. i guess my real question (that I failed to state clearly) is if there is any event that will reliably fire when the user arrives at my page via back button. – Kip Jul 16 '09 at 13:14
  • I edited my answer. AFter it's been visited again once you set a cookie. Then if they refresh the cookie will still exists and you just have to make sure it's in the if statment. Try that out....let me know how it works. – Eric Jul 16 '09 at 15:30

4 Answers4

2

Isn't that the behaviour you want, so they don't double-submit using the back button?

Anyway, you could set a cookie on the following page, and detect that on load on the page with the form.

Kev
  • 15,899
  • 15
  • 79
  • 112
  • in some cases, yes. the problem is that it's applied unilaterally to all forms in our app, and in some of them it actually makes sense for the user to go back and use a different submit button to get to a different view. (i didn't design it, i'm only trying to work with it) – Kip Jul 15 '09 at 21:20
2

Yes. In javascript you can use visited.value

function checkrefresh()
 var visited = getCookie("visited");  
{
        if((form.visited.value == '' || form.visited.value == null) && (visited != '1') ) 
        {
            document.form.visited.value = "1";
                    document.cookie = "visited=1";
                    //here you set it to something so that next time they go to the page it will no longer be nothing and you can 'disable the button' see below.

        }
        else
        {
            document.form.submitbutton.disabled=true;
        }
    } 

function getCookie(name)
{
var re = new RegExp(name + "=([^;]+)");
var value = re.exec(document.cookie);
return (value != null) ? unescape(value[1]) : null;
}

you would call this in the onload tag FYI.

Eric
  • 7,930
  • 17
  • 96
  • 128
  • this made it so that a refresh after hitting back would re-enable the button, but the button was still disabled after hitting back. if there's not a better alternative, i may have to use this as a workaround. – Kip Jul 16 '09 at 03:18
  • thanks for continuing to look at this, but the problem is that if i put this in the body tag's onload attribute, it doesn't get called immediately. the user still has to manually refresh for this to be initiated. what i'd like (and i'm not sure if it is possible) is to find an event i can listen to that will fire as soon as the user is shown the page (after the back button was pressed) – Kip Jul 16 '09 at 17:59
  • Are you using Visual studio? What programming environment are you in? – Eric Jul 16 '09 at 19:33
1

I don't think you can test for the back button specifically, but I believe you can check the browser's history position with Javascript.

tkotitan
  • 3,003
  • 2
  • 33
  • 37
  • You can compare history.current with history.length, but only if your script is trusted. – Kev Jul 15 '09 at 21:17
  • It seems that modern browsers (2012) do not support history.current, so I added new answer. – TecBrat Jun 20 '12 at 18:21
0

The answer by @tkotitan was probably correct when he wrote it. His answer led me to my solution. It's not foolproof, but it might be "good enough" to help in some situations.

I improved my script and replaced it with the following. This version is for an intermediate page that now works as intermediate in both directions.

<?php
if($_SERVER['QUERY_STRING']=='')
{
    echo '<a href="go_back_test.php?page=1">Go forward</a>';
}
elseif($_GET['page']!=2)
{
    echo 'You cannot stay here.';
    echo '
    <script type="text/javascript">
    function test()
    {
        if (document.getElementById("detectback").value=="goneback")
        {
            document.getElementById("detectback").value=history.length;
        }
        if (document.getElementById("detectback").value==history.length)
        {
            document.getElementById("detectback").value="goneforward";
            window.location = "go_back_test.php?page=2"
        }
        else
        {
            document.getElementById("detectback").value="goneback";
            window.history.back();
        }
    }
    function updateform()
    {
        if(document.getElementById("detectback").value=="")
        {
            document.getElementById("detectback").value=history.length;
        }
    }
    </script>
    <img src="spacer.gif" onload="updateform(); test();"><br>
    <form>
        <input id="detectback" type="text" value="" style="display: none;">
    </form>
    ';
}
else
{
    echo 'Welcome to page 2';
}
?>
TecBrat
  • 3,643
  • 3
  • 28
  • 45