After form submit, show new values inside inputs instead of cached ones

Question

ATTENTION: This was not a cache problem, nor a server misconfiguration, nor a browser issue. After careful investigation, I've found the problem was due to a problem in my code: Stupidly enough, my select query that populates the fields preceded my update query, causing the form to always show the values before the update. After reloading, of course the newly updated values would appear, causing me to look in the wrong direction.

This question however shows a nice overview of all the possible solutions when facing a caching problem.

---

I'm building an application on which there are forms, populated by values from a database. The user can change the input values of the form. After submitting (not via AJAX), the new values are saved to the database AND the same form is displayed again, this time containing the new values, loaded straight from the database. However: my browser (Chrome v27.0.1453.116m on Windows 7) caches the old values. The new values are only shown when I navigate to my page again.

<form id="edit_form" class="form" action="http://the.same.url/" method="post">
  <input type="text" name="example" value="<?php echo $value_from_database; ?>" />
</form>  

I have come across several solutions, none of which quite solve the issue:

• Setting an attribute autocomplete="off" on the form tag: this does not seem to have effect.
• Setting an attribute autocomplete="off" on the individual input tags: this also does not yield results, even in combination with the above solution
• Resetting the form with JavaScript on page load: this gives some results, but apparently does not affect radio buttons and others.
• Preventing caching of pages via meta-tags, as suggested here: Using <meta> tags to turn off caching in all browsers? Also, preventing caching via .htaccess or php headers does not have effect.
• Trying to cache-bust by adding a random number to the action-url, as suggested by comment below by Miro Markarian

Here is an overview with proposed solutions: Make page to tell browser not to cache/preserve input values

What are my options? If possible, I would like to avoid posting my form asynchronously. It starts to look as if I have no other choice. Any input is appreciated.

Please note that this behavior also appears in other browsers, such as IE10.

My page title is the same as the value of one of the inputs in my form and also does not change upon submitting a new value, imho we can determine this to be a caching issue.

Google Chromes' Web Developer plugin shows me the following headers:

Pragma: no-cache
Date: Sun, 30 Jun 2013 09:44:12 GMT
Content-Encoding: gzip
Vary: Accept-Encoding
Server: Apache
Transfer-Encoding: chunked
Content-Type: text/html; charset=utf-8
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Connection: Keep-Alive
Keep-Alive: timeout=15, max=100
Expires: Thu, 19 Nov 1981 08:52:00 GMT

200 OK

Answer 1

You could change the name attributes of the inputs by some random string and store them in a hidden input.

<form id="edit_form" class="form" action="http://the.same.url/" method="post">
  <input type="text" name="saejfb27982" value="..." />
  <input type="text" name="iuqde37we83" value="..." />
  <input type="hidden" name="associativeArray" value='{"example":"saejfb27982","example2":"iuqde37we83"}'>
</form>  

(Since the name is different each time, the browser won't be able to match it with any form of caching, autocompletion...)

Answer 2

I have the feeling that your server sends 304: Not Modified instead of the data you would normally send. This question might help you if you are using apache.

I think something like this should do (but it is untested). It should delete the If-Modified-Since header for every request that asks for a php-file, forcing the application to send content instead of a Not-Modified status.

<ifModule mod_headers.c>
<FilesMatch \.php$>
RequestHeader unset If-Modified-Since
</FilesMatch>
</ifModule>

Answer 3

Couldn't you take:

<form id="edit_form" class="form" action="http://the.same.url/" method="post">
 <input type="text" name="example" value="<?php echo $value_from_database; ?>" />
</form> 

and change it to:

value="<?php echo if(isset($_POST['example'])):$_POST['example']?$value_from_database; ?>

Which says: See if I have a variable already in the $_POST array after the form was submitted. If I do, use that value, if not, pull from db.

You may need to set session variables ($_SESSION['ex'] = $_POST['example']), and do the tweaks to the code above

Answer 4

I believe you just forgot to echo $value_from_database, which, in turn, defaults back to the browser's cached value. You should have the following input element instead:

<input type="text" name="example" value="<?php echo $value_from_database; ?>">

While this should get the correct $value_from_database, I'm not entirely sure why you still weren't able to turn off caching altogether.

Answer 5

The first answer for this question suggests to add the following headers in order to disable browser caching:

<?php
header("Expires: Tue, 01 Jan 2000 00:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
?>