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?

Answer 1

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.

Answer 2

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.