Form Textfields wont reset in Firefox and Edge Options

[Terminator]

If you hit the refresh button in Firefox and Edge the Textfields dont reset. The only way to is to Ctrl F5. I have a reset form button but would still like it to reset on refresh.

I have been searching on this for awhile, and dont want to use the autocomplete="off" answer that many sites gave. Also an onload form reset code doesn't seem to work either.

This problem has been going on for years it seems:

http://stackoverflow.com/questions/2486474...h-with-meta-tag

http://stackoverflow.com/questions/1310798...blem-in-firefox

Chrome doesn't have any issues, it resets entire form on refresh.

Anyone have any suggestions?

thanks

*******EDIT******

Just found this from a website that posted it over 10 years ago, and it does the trick. I put it under window.onload = function()

Let me know if you think there is a better way of doing this but I think this should be fine.

CODE

var t = document.getElementsByTagName("input");
    for (var i = 0; i < t.length; i++)
    {
        t[i].value="";
    }

I cant believe how many incorrect answers are on sites like stack overflow

This post has been edited by Terminator: Sep 18 2016, 12:12 AM

[pandy]

Just found this from a website that posted it over 10 years ago, and it does the trick. I put it under window.onload = function()

Let me know if you think there is a better way of doing this but I think this should be fine.

CODE

var t = document.getElementsByTagName("input");
    for (var i = 0; i < t.length; i++)
    {
        t[i].value="";
    }

I cant believe how many incorrect answers are on sites like stack overflow

But that was suggested at Stackoverflow also.

http://stackoverflow.com/a/2950410

[pandy]

I've never had the need to do this, but I think I'd rather do it like this.

CODE

function resetIt()
{
   document.getElementById("theform").reset();
}

window.onload = resetIt;

The advantage as I see it is that it resets the form to its initial values which may or may not be empty. That is, prefilled values are restored.

[Christian J]

This problem has been going on for years it seems

Yes, found this from year 2000: https://bugzilla.mozilla.org/show_bug.cgi?id=46845 Not sure what (if anything) the W3C specs say.

FWIW, Jakob Nielsen advices against Reset buttons: https://www.nngroup.com/articles/reset-and-cancel-buttons/ "it is usually faster to edit the old data than to erase it and start over". Maybe he's right: why would the user need to erase the entire form?

[pandy]

IIRC at least the Mozilla guys don't see it as a bug but as a feature. Maybe for the same reason my dear uncle detests reset buttons.

Haven't given this much thought before, but now when I think about it I think I like a form that can be reloaded without losing data *if* it has a reset button so I have a way to clear it all should I want to.

Typical scenario when I want to clear a form. I'm going to buy something and I can't find out how much the shipping is before I've filled in my location and so on. I don't want to risk anything (like spam emails), so I do the qwerty thing, with real data only for the essential parts. If I'm OK with the cost I want to clear the form and fill in my real details.

[Christian J]

Haven't given this much thought before, but now when I think about it I think I like a form that can be reloaded without losing data *if* it has a reset button so I have a way to clear it all should I want to.

At least newer Invision forums may save everything you type into the textarea (only as local storage, I hope), so even if you erase what you've typed into a thread's quick reply textarea it's added back the next time you open the thread. A bit annoying to me.

If I'm OK with the cost I want to clear the form and fill in my real details.

Can't you just overwrite the dummy text with the real one?

[Terminator]

But that was suggested at Stackoverflow also.

http://stackoverflow.com/a/2950410

Instead of using getElementsByTagName, he was using getElementById and typing each text field one at a time. That is way too much coding if you have a lot of text fields on your form.

The post on that page that was marked as the "correct" answer gave me the biggest laugh though. When the guy said "There is something you can do about, but it's very messy". Not true at all, a simple for loop took care of it for me.

I've never had the need to do this, but I think I'd rather do it like this.

CODE

function resetIt()
{
   document.getElementById("theform").reset();
}

window.onload = resetIt;

The advantage as I see it is that it resets the form to its initial values which may or may not be empty. That is, prefilled values are restored.

This actually does not work in Firefox, and this same thing was mentioned many times on Stack Overflow, I went through about 15 links from them. Maybe it used to work years ago, or the people typed the answer there without trying it.

FWIW, Jakob Nielsen advices against Reset buttons: https://www.nngroup.com/articles/reset-and-cancel-buttons/ "it is usually faster to edit the old data than to erase it and start over". Maybe he's right: why would the user need to erase the entire form?

I think it depends on what the form is doing as to why you would want to clear it out. Something like the link below they might want a clear button because many of the people using that form are a business themselves, a mortgage company trying to get fees for their client. So they would be inputting info constantly and if they started doing one on the wrong property they can reset the entire form to start from scratch, rather then typing over because they might accidentally tab through a field and forget to change it.

http://facc.firstam.com/

This post has been edited by Terminator: Sep 18 2016, 11:04 AM

[pandy]

Instead of using getElementsByTagName, he was using getElementById and typing each text field one at a time. That is way too much coding if you have a lot of text fields on your form.

I meant the concept. Setting the fields to an empty value. What way you go about it isn't that important.

This actually does not work in Firefox, and this same thing was mentioned many times on Stack Overflow, I went through about 15 links from them. Maybe it used to work years ago, or the people typed the answer there without trying it.

Really? Which of the threads? I don't have a problem with FireFox.

[pandy]

This is the only time I see reset() mentioned. What do you refer to?
http://stackoverflow.com/a/24556494

It works fine in 47.0. Most current is 47.0.1 so I don't think that's an issue. Did you try it and in what version of FF?

[Terminator]

This actually does not work in Firefox, and this same thing was mentioned many times on Stack Overflow, I went through about 15 links from them. Maybe it used to work years ago, or the people typed the answer there without trying it.

Really? Which of the threads? I don't have problem with FireFox.

I put in your code with my form name and it did not work. Maybe I am doing something extra that blocks that, but it did not work in FireFox or Edge until I used my method.

Stack Overflow does have good info if you know how to find it, but not on this question for me. I went through at least 15 posts that said stuff like:

CODE

<input type="text" autocomplete="off" />

or

CODE

$('#inputid').val('');

and I wasnt about to turn autocomplete off, and the second example also did not work for me.

This post has been edited by Terminator: Sep 18 2016, 11:50 AM

[pandy]

Your name meaning name=""? Or id=""?

Still, I don't find the comments saying it doesn't work in FF in those threads.

[Christian J]

Just some nitpicking:

CODE

window.onload = resetIt;

window.onload can only be used once on a page, so it may conflict with existing ones. In contrast,

CODE

window.addEventListener('load', resetIt)

can be used multiple times. But it may be even better to use

CODE

window.addEventListener('DOMContentLoaded', resetIt);

since it fires as soon as the HTML is loaded, not waiting for e.g. images to load.

[pandy]

I'm more interested in if you've ever heard of FF not handling reset(). Can't find a thing about it.

[Christian J]

I'm more interested in if you've ever heard of FF not handling reset(). Can't find a thing about it.

No, it works in my FF too. But I just learned resetting forms doesn't affect hidden input fields (in any browser), from my quick test it doesn't matter if you use a Reset button or the JS reset() method.

My post above was partially aimed at Terminator, in case he already used a window.onload event somewhere. BTW here's another FF quirk that's annoyed me before: http://www.neiland.net/blog/article/turn-o...pt-development/

[pandy]

No, it works in my FF too. But I just learned resetting forms doesn't affect hidden input fields (in any browser), from my quick test it doesn't matter if you use a Reset button or the JS reset() method.

Don't understand. How would they have been changed in the first place?

[Christian J]

Don't understand. How would they have been changed in the first place?

Javascript might change them.

[pandy]

I thought you maybe meant that. Interesting. Reloading the page doesn't clear it either. Didn't know that either. Wonder what the rationale is behind this.

[Christian J]

Wonder what the rationale is behind this.

Seems they've made a mistake and now it's too late to fix:

"As much as I agree with the points raised, unfortunately, what the spec describes is what browsers already do. There is therefore not much room for us to make the spec more sensible on this front."
https://www.w3.org/Bugs/Public/show_bug.cgi?id=8506

[pandy]

Do you know if the mistake in older HTML specs also?

[Christian J]

Haven't tried deciphering the specs, but my guess is it's an oversight from the beginning.