Bugzilla

Wow, 11 years old. Just been bitten by this from a bug report from our users.

The auto-restoration of form fields basically BREAKS AJAX form submission flow - on reload the old form values will be restored. This can cause duplicate page submissions from users.

Generally any time you prevent the form from being submitted, Firefox will keep the old form values and restore on reload. There's nothing you can do about that, except add `autocomplete=off` to your form fields which sucks because it fixes this problem and breaks another useful feature.

Firefox is the odd one out here. Chrome doesn't auto restore, nor does Safari. Why is Firefox having such an opinionated way of handling this that isn't even mentioned anywhere in the spec?

Would be great to have more eyes on this.

===

Example code:

<form method="POST">
	<textarea name="test"></textarea>
	<button name="submit" value="submit" type="submit">
		Submit
	</button>
</form>

<script>
  document.querySelector('form').addEventListener('submit', function(e) {
     e.preventDefault(); // Firefox doesn't care. It will still persist the form values.

     // Handling the form by ajax. Firefox doesn't see this and will still keep old form data on reload.
     fetch(e.target.action, { method: e.target.method, body: new FormData(e.target) });
  });
</script>

Wow, 11 years old. Just been bitten by this from a bug report from our users.

The auto-restoration of form fields basically BREAKS AJAX form submission flow - on reload the old form values will be restored. This can cause duplicate page submissions from users.

Generally any time you prevent the form from being submitted, Firefox will keep the old form values and restore on reload. There's nothing you can do about that, except add `autocomplete=off` to your form fields which sucks because it fixes this problem and breaks another useful feature.

Firefox is the odd one out here. Chrome doesn't auto restore, nor does Safari. Why is Firefox having such an opinionated way of handling this that isn't even mentioned anywhere in the spec?

Would be great to have more eyes on this.

===

Example code:
```html
<form method="POST">
	<textarea name="test"></textarea>
	<button name="submit" value="submit" type="submit">
		Submit
	</button>
</form>

<script>
  document.querySelector('form').addEventListener('submit', function(e) {
     e.preventDefault(); // Firefox doesn't care. It will still persist the form values.

     // Handling the form by ajax. Firefox doesn't see this and will still keep old form data on reload.
     fetch(e.target.action, { method: e.target.method, body: new FormData(e.target) });
  });
</script>
```