Input fields are retaining their values after a page refresh, how to prevent that?

Question

<table id="post">
    <tr>
        <td style="font-size: 20px;">Post Your comment</td>
    </tr>
    <tr>
        <td>Name:</td>
        <td><input type="text" id="username" name="username"></td>
    </tr>
    <tr><form id="postform" action="" method="post" name="form">
        <td>Type your message here:</td>
        <td><textarea name="text" id="text" rows="5" cols="40"></textarea></td>
    <tr>
        <td><input type="hidden" id="pageid" name="pageid" value="20"></td>
    </tr>
    <tr>
        <td><input id="submit" type="submit" value="Post Comment"  name="submit" style="width:auto;"/></td>
    </tr>
    </form>
    </tr>
</table>

The page is retaining value in textbox and textarea after refresh.Can anyone suggest me the way to overcome it?

Answer 1

Those values are just auto-filled by the client side (the webbrowser) based on the client history. You need to add autocomplete="off" to the form or the individual input fields for which you'd like to turn it off.

<form autocomplete="off">
    ...
</form>

or

<form>
    <input autocomplete="off" />
    <input />
    <input autocomplete="off" />
    ...
</form>

No need for nasty JS hacks which may not work on all environments.

See also:

• W3 Web Forms 2.0 specification - autocomplete attribute

---

Unrelated to the concrete problem, your HTML structure is far from valid. I'd suggest to pass your page through http://validator.w3.org and fix the errors/warnings accordingly.

Answer 2

I believe this is a browser thing, not a code thing.

However, if you want to override the default behavior when the page has loaded, try running (jQuery):

$(function(){
    $( 'textarea, input[type=text]' ).val('')
});

or (pure Javascript):

var load = function()
{
    document.forms[0].elements["username"].Value =
        document.forms['postform'].elements["text"].Value = '';
}

in the body tag of your page add: onLoad=load()