Question

I’m implementing form dirtiness detection for a web-app. The ‘dirtiness’ that I’m interested in is the server’s value versus what’s displayed on the form. The server is running Django, most of our scripting is in jQuery.

We serve the form fields with the correct default values corresponding to the value on the server, e.g.

<input name="foo" type="text" value="this is the saved value" id="id_foo" />

The standard answer is to iterate through the form inputs and save their initial values for later comparison at load time.

This works in most cases, but Firefox breaks this by sometimes ignoring the supplied value and instead replacing it with the user’s last input. So, for example: We serve the form, the user modifies it (“now it’s dirty”), then refreshes; Firefox replaces the value with the user’s last input.

This breaks the script detecting dirtiness, because its initial value is not the one the server supplied, but rather the one the user entered before the refresh. The script has no way of accessing the original value at that point.

How are other developers getting around this? Right now I’m supplying a hidden span with the real original value, but it feels incredibly hacky:

<input name="foo" type="text" value="this is the saved value" id="id_foo" />
<span class="original-value" id="id_foo_orig">this is the saved value</span>

Is there some way to disable this behaviour for inputs in Firefox? (IE and Chrome at least don’t do this)
Am I missing something fundamental here?

Thanks,
  Robert

Answer 1

Add a autocomplete="off" attribute to the form to disable autocompletion of the fields, if that’s okay. Here’s the documentation – https://developer.mozilla.org/en/How_to_Turn_Off_Form_Autocompletion