Reload page

Here is what is happening and why.

When you post data to a page the browser remembers the post (url + data posted)- this is because POST data is sent in the body of the REQUEST - not in the URL - whereas a GET has the parameters in the URL - a refresh on a GET does not lose anything. When you hit refresh the browser will ask you if you want to resend the data as well as refreshing the URL. In some instances this is very useful - for instance testing a script that accepts posted data - you don't want to have to re-enter the data each time.
However, in production environment this is a problem.

There are two ways of getting around this
1. Do your post by AJAX and populate the screen with data sent back to the complete function
2. On the server redirect to the page

Option 2 is really for situations where you are posting data that needs to be saved - you save then redirect so that you don't end up re-submitting your data.

In your case however you are actually doing a GET - you are posting your variables but in the true sense you are doing a GET of existing data.
One option would be to change from POST to GET - the variables move to your URL - you can then refresh without the popup BUT you don't get the blank screen.

That leaves you either with the AJAX solution or writing some overly complicated code on the server to save the POST variables in a session - redirect to the same page - get the POST from the SESSION, clear the SESSION and send back the data.

Optionally you could just have a button that says Clear that sits in its own form and does a get on the URL.

Thanks Julian,

I believe I will manage ti like this:

<button onclick="myFunction()">Nulstil</button>
                                    <script>
                                    function myFunction() {
                                    location.reload();
                                    }
                                    </script>

Select allOpen in new window

Hey Peter,

location.reload() will do exactly the same as if you hit refresh - it will prompt the visitor asking if they want to re-submit the data.

If you genuinely want to clear the data with a button click, then it would make more sense to just remove the table from the DOM. Something like:

$('#clearButton').click(function() {
    $('#myTable').remove();
});

Select allOpen in new window

Having said that, I'm with Julian on this - the way forward is to implement an AJAX request to get the data. Will make this all a bit easier and your page more responsive :)

Thanks Chris,

I will consider moving to AJAX - but not just now where everything works so beautifully :)

But, but - hitting the browsers refresh button does not do the same thing as the reload function i have put in does.

The both ask if I want to resend, but the reload function clears the page and all the search strings, which the browsers refresh button does not do.

There is something strange with your code - if you take a look at this sample http://www.marcorpsa.com/ee/t2859.php you will see it does not exhibit the same behaviour.

I also noticed that on your page the first time I click the Nulstil button (with a break point in myFunction) if I step over the location.reload() it does not clear the page. However, it also seems to lose something because a second click on the button does not trigger the same breakpoint and does clear the page.

What I think is happening is that your button is doing a reload AND a post - I suspect if you put an evt.preventDefault() in the myFunction it will not clear the results.

So when you click the Nulstil button it posts the (now empty select's) and does a reload. Because the post is now with empty select's the page is clearing - because your code is not sending back any results - so you get the desired effect but not for the reasons you think

I'm not sure I understand.

How should the button be able perform a POST when the only code that relates to the button is this:

<button onclick="myFunction()">Nulstil</button>
                                <script>
                                function myFunction() {
                                    location.reload();
                                }
                                </script>

Select allOpen in new window

Is it because the reload button is placed inside the form?

For me, it doesn't matter whether I refresh the page or click the button - the result is the same - I get prompted to re-submit the data - if I say Yes to the prompt, then the query is re-submitted and the results are not re-loaded. If I say Cancel then the page reload is cancelled and the data remains. This is what I would expect to happen with both the reload() method and the browser refresh.

Julian's page is showing exactly the same bahaviour.

As I've already suggested - just delete the table when the button is clicked.

How should the button be able perform a POST

The button is inside a form, it submits by default.

Take a look at the first sample I posted - the button exists outside the form (http://www.marcorpsa.com/ee/t2859.php)
To emulate your form enter something in the text box and submit. Then clear the box and click the refresh button. The test value is still submitted each time.

No look at this sample http://www.marcorpsa.com/ee/t2861.php, similar concept except this one has the button inside the form. Now repeat the exercise. Enter a value and submit. This time the post value is cleared (refer the block below) - the reason being that in the first sample no post is being triggered so the cached value of the form is being submitted - even when you blank the box the posted value does not change. In the second sample a post and a reload are being done - the post is clearing the posted value

Am I missing something - the Nutsil button is NOT inside the form!!

Am I missing something - the Nutsil button is NOT inside the form!!

Its been moved - it was definitely there before.
If you try it now you will see the data does not clear.

It is inside the form. I was just trying :)

I think we are beginning to run down a side track here :)

Thanks a lot for your input. Everything is working as expected, and I am closing this thread for now.

Thanks to Julian and Chris :)

Just a note - you might have missed my last comment.

As you have it - it still asks you to resend. My last (and first) suggestion was to do this

<form action="http://kroweb.dk/gfdev/ft_raw2/">
<button>Nulstil</button>
</form>

Select allOpen in new window

This will refresh the page without asking you, the only drawback is that you will have to do some styling to get the buttons next to each other.

You can achieve the same result by just removing the onclick() from the button as it is now.

To see what I am saying do the following

Select options from the select that shows a result.
Now click the Sog button (without making any further selections) - the page will clear without asking you.

By removing the onclick from Nulstil - you get the same effect.

The advantage of the separate form option is it guarantees a clear - the second won't if there are selections in the dropdowns