clear input fields on page refresh (Microsoft Edge)

Question

I'm just a beginner, but can someone help me out?

I have an HTML page with a couple of input fields, and I want the fields to be cleared when the page is refreshed.

My HTML looks like this:

<input type='text' id='input_field' value=''>

Then, toward the beginning of my script, there's this:

document.getElementById('input_field').value = '';

This works fine in Firefox; when the page is refreshed, the value is emptied and the field is cleared.

It does not work in Microsoft Edge; when the page is refreshed, the actual value is emptied, but the contents of the field remain.

I've also tried wrapping my input element(s) in a form element, and using JavaScript to reset the form, but the results are the same.

As you can see, I've kept the value attribute in the HTML, but only for purposes of demonstration and experimentation. Omitting it has no effect in either browser. However, if I leave the HTML attribute but omit the JavaScript statement, both browsers behave differently: in Edge, the contents of the field "catch up" to the actual value (i.e., the field clears), but only after the page is refreshed twice; and in Firefox, this fails to update the value at all, no matter how many times the page is refreshed.

Finally, if I edit the source in any way and then reload the page in Edge, it empties the actual value and also clears the field, but only on that initial reload. After that, the problem persists. This makes me wonder if it's a cache issue.

Any help or suggestions?

You want to values cleared for development purposes or in the final production environment? If this is for the final production environment, why? — Tigger, Aug 05 '16 at 23:56

score 22 · Answer 1 · edited Apr 20 '18 at 14:27

22

Add the attribute autocomplete="off" to the <input> tag.

<input autocomplete="off">

This may not work on all browsers. See this site for browser support chart: https://caniuse.com/#feat=input-autocomplete-onoff

If it's not working on Edge try the solution provided on this fiddle by fizzix.

Original post Chrome Browser Ignoring AutoComplete=Off.

edited Apr 20 '18 at 14:27

James Douglas

3,328
2
22
43

answered Aug 06 '16 at 00:03

mrdotb

612
6
15

Thanks. As noted in the answer I just posted, `autocomplete='off'` doesn't seem to work, but it was one of my first hunches as well. I'll have a look at the fiddle, though. – TeRrIrAoLr Aug 06 '16 at 07:28
Also works for: I have a javascript which is auto-uploading an image when input field is modified (drag'n'drop). If the user is using the browser "back button", the image was resubmitted because of autocomplete. – Toto May 16 '21 at 21:59

score 9 · Accepted Answer · answered Aug 06 '16 at 07:20

First, thanks for the responses.

I had tried autocomplete='off' (sorry I forgot to mention that), but it didn't seem to work.

Just before checking here for replies, though, I decided to try one other experiment. I added a button to my page which, when clicked, would call a function containing the JavaScript .value = '' statement.

For whatever reason, that worked just fine; it emptied the value and cleared the field, which got me thinking that tying the "reset" to a specific HTML event might be the key. I tried a couple of things that didn't work, but finally I just replaced this:

document.getElementById('input_field').value = '';

. . . with this:

window.onload = function() {
  document.getElementById('input_field').value = '';
  }

. . . and that did it. Every time I refresh the page in either Firefox or Edge, the value is emptied and the field is cleared.

I'm not sure why that worked (like I said, I'm just getting started with this stuff), but there it is.

score 1 · Answer 3 · answered Nov 29 '19 at 13:13

1

If the input is inside a form element <form id="example"> ... </form> , then you can do something like document.getElementById('example').reset(). You can call this inside window.onload.

HTMLFormElement.reset()

answered Nov 29 '19 at 13:13

illiteratewriter

4,155
1
23
44

score 0 · Answer 4 · answered Mar 07 '22 at 14:16

0

You can add space between the single quotes in the value attribute

Hopefully this should work on refreshing the page

answered Mar 07 '22 at 14:16

Syed Hussaini

1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 07 '22 at 16:45

clear input fields on page refresh (Microsoft Edge)

4 Answers4