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

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()