I'm reloading a web page that has the following code:
<label for="showimage">Show Image</label>
<input id="showimage" name="showimage" type="checkbox" value="1" />
Even though the HTML stays sent to the browser is the same for each reload of the page, the checkbox always takes on the checked value when a reload was performed. In other words, if the user checks the checkbox and reloads, the checkbox is still checked.
Is there some caching going on here?
Edit: I tried Gordon Bell's solution below and find that this is still happening even after removing the value="1". Anything else I might be missing?
<label for="showimage">Show Image</label>
<input id="showimage" name="showimage" type="checkbox" />
Add autocomplete="off" into the form element on the page. The downside is that this isn't valid XHTML, but it fixes the issue without any convoluted javascript.
Yes, I believe it is caching. I see this behaviour on Firefox for example (not Safari, for what that's worth :) ).
you can reload the page and bypass the cache (on Firefox) using CTRL-SHIFT-R and you'll see the check value doesn't carry (a normal CTRL-R will grab the info from the cache however)
edit: I was able to disable this server side on Firefox, setting a cache control header:
Cache-Control: no-store
this seems to disable the "remember form values" feature of Firefox
set autocomplete="off" with js is also working well.
for example using jquery:
$(":checkbox").attr("autocomplete", "off");
This is an old question but still an active issue for firefox. None of the responses i tried solved it, but what did solve it for me was simply this:
document.getElementById('formId').reset();
This simply resets the form to the default options every time the page loads. Not ideal since you lose granular control, but its the only thing that solved this for me.
It is a nice feature of Firefox: if you type something but reload the page, the text remains in the text area. Idem for other settings you have chosen.
Alas, it doesn't work in SO (probably reset by JS) and dumber browsers like IE...
Which suggest a solution: if you really need to do that, reset the form with JS. form.reset() might do the job (acts like the Reset input button).
or instead of f5 press enter on address bar :)
It could be due to a browser caching - very useful for static web sites that are not changed too often, very bad for dynamic web applications.
Try with those two meta tags in the head section of the page. Second meta tag is for older browsers (IE5) that are not recognizing "no-cache" meta tag and although different produces the same result: Each request goes to the server.
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
$("#showimage").prop("checked",false);
the public idea to solve that
make form & reset button
<form>
<checkbox>
<reset>
</form>
$(reset).trigger("click");//to clear the cache and input
$(checkbox).trigger("click");//to mark checkbox
Related
I didn't find the answer yet.
I've checked my code in the chrome element inspector and my input tags got an attribute fdprocessedid that I didn't write and I don't understand what is doing and its function. Can someone explain? Thanks!
<input type="number" fdprocessedid="esjjvm" /> (the value chages in each input with random letters)
We had this same issue. It turned out to be the McAfee WebAdvisor Chrome extension that was adding "fdprocessedid" to every button, etc. Try disabling your extensions or launching the page in Incognito mode, and see if it's still there.
I've got a new site we're working that uses HTML5. Everything validates except for the LESS stylesheets and the Facebook tags. However, Chrome will not autofill properly. If I type 'chr' in the first name field, I get the standard Autofill drop down beneath it, but highlighting, clicking, or otherwise selecting the autofill option does not complete the form as it should. The autofill dropdown merely goes away.
I'm guessing there's something in my HTML that is confusing the autofill code, but I can't seem to find any information on the web about Chrome's autofill implementation and things to look for when it doesn't work.
Edit: I know Autofill is working properly because it works on other sites, even other sites we've developed. It's got to be something specific to the HTML on this site.
Chrome will not save password or autocomplete data if a form is submitted asynchronously. For example, if you submit the following form, Chrome will prompt you to save the password:
<form action="/signin">
<input type="text" name="email" />
<input type="password" name="password" />
<button type="submit">Sign In</button>
</form>
However, if you bind to the submit event and override the default behavior, there will be no prompt and the autocomplete data won't be saved:
$(function(){
$('form').submit(function(e){
e.preventDefault();
$.post($(this).attr('action'), $(this).serialize());
});
});
Tested in 20.0
It seems that Chrome only enables the autofill for forms with a POST method. This may have been a security update on a recent version.
Autofill will work if you do:
<form id="myForm" action="?go" method="post">
It won't work if you omit the method or it's set to get:
<form id="myForm" action="?go" method="get">
<form id="myForm" action="?go">
The only way I know of in HTML to block it is setting: autocomplete="off" on the inputs.
I know drop downs don't work sometimes with autofill, but not text boxes.
I have just fighted with this issue for a while, I found out that a "name" attribute with
a dash like "email-2" would cause Chrome not to autocomplete the field.
In my case I have changed it to email2 and now it works.
It only affects the "name" attribute, while the "id" attribute does not make any difference.
I hope this help someone to save time with such a silly bug.
Greetings from Argentina!
Sorry I can't give you a definitive answer, but I would start with removing everything from the page except that input field. If it works then I would start "binary search" - remove half of the original layout and see if it works, if it isn't - remove another half of what's left and so on, until problem line is found.
Same could be applied to css, js, etc. It is a pretty effective way of searching for errors (for 1024 lines of code you will find exact problem line in just 10 steps).
Only Those elements which require autofill should be there inside the form.otherwise the autofill wont work.Bring only those textboxes under a form.if u already have form involving other elements,separate them and put new form tag around the textboxes which require autofill and nothing else inside it.
I have a xhtml page with transitional doctype having a checkbox that I want to be unchecked after loading. No JavaScript! In Firefox 3.5 (for instance, there may be other browsers) user can check input, than reload page and get input checked. How can I overcome this behaviour?
Use
autocomplete="off"
Also have a look at Why does the checkbox stay checked when reloading the page?
You can't do much to change a document's state with HTML alone. All you can do is set checked="checked" or not.
You need either JavaScript or a server side language to determine whether that attribute should be set or not.
You can't, not without JavaScript. This is Firefox specific behaviour which would occur even if you could explicitly force an "unchecked" state (which you can't, because the absence of checked already means that.)
The only non-Javascript way that I know of is to rename the form element on server-side on every request so FF has no chance of storing the value.
To explicitly set the checkbox to unchecked, the following worked for me:
<input type="checkbox" unchecked>
Try to put in your code this:
<p><label><input id="test" type="checkbox"></input>Test checkbox</label></p>
It will be unchecked when the page starts or refreshes.
I have problem with <input type="file" /> in Chrome - it does not show the textbox near the 'browse' button. What is a best way to show a standard file input (textbox+button) in Chrome?
This is the default behavior of Google chrome as well as Safari. Read this blog for a solution
The box is there, although it is not designed.
It might be on the "wrong" side of the window, but it's there.
Just for the matter - put a border around it - and you'll see it's there.
<input type="file" style="border: solid 1px red">
Also, after you select a file - you get the name of it.
<input type="file"/> has different visual appearance depending on the browser. On some browsers it is a text field with a button in others its just a button. Since the element isn't very styleable there isn't much you can do about it.
If you really want a file upload to look/behave different from the default implementation flash is the way to go.
For example many sites use sfwUpload. For full styleing freedom, you can make it invisible and place it on top of a html button via positioning.
Another way to work with the file upload inputs are to make them invisible via visibility: hidden, position them on top of other elements and thus forgo the use of flash, but the implementations are rarely very nice, so i wouldn't recommend it.
The file input element is styled differently depending on your browser (and probably OS - I've only ever used Windows). If you look at the same page with a file input element in FF, IE and Chrome, it will appear differently in each browser.
Why do you need to display the textbox anyway? In FF and IE you can't type directly into it anyway, so the only usage would be to display the filepath of the selected file; which Chrome already does for you, just not in a box.
I found a link from someone else who was having this problem, solution here.
It doesn't specifically mention chrome, but safari does the same thing apparently. (The link was an accepted answer posted in a chrome discussion)
edit: wow, second time this morning that I've been out googled by another member! at least questions are getting answered!
You could override the default behaviour and swap the control appearence alltogether. Found this today researching how to edit the css on fileupload.
Most of the times type file got display:none style. In that case use !important to display the input field.
<input id="cv_file" type="file" name="cv" style="display:block !important;"/>
Sometimes it is just caused by a javascript code similar to this one:
function someOnClickHandler(e)
{
e.preventDefault(); // it kills the file dialog
}
// somewhere:
$('.some-selector-which-contains-the-file-elem').on('click', someOnClickHandler);
When a user hits Refresh on their browser, it reloads the page but keeps the contents of form fields. While I can see this being a useful default, it can be annoying on some dynamic pages, leading to a broken user experience.
Is there a way, in HTTP headers or equivalents, to change this behaviour?
<input autocomplete="off">
This should do the trick:
<body onload="document.FormName.reset();">
Replace FormName with the name of your form and then all the fields will be reset when the user clicks refresh in his browser.
Or if you only want to reset some fields, add this to the bottom of your page:
<script type="text/javascript">
document.getElementById('field1').value ='';
document.getElementById('field2').value ='';
document.getElementById('field3').value ='';
</script>
That will reset the fields every time a user enters the page, including refreshes
Add the autocomplete attribute set to "off" to the inputs you don't want to be refreshed.
For instance:
<input type="text" name="pin" autocomplete="off" />
see
the W3C reference
although not mentioned in the reference, it works also with checkboxes, at least on firefox.
You could call the reset() method of the forms object from the body load event of your html document to clear the forms.
h1. References
MSDN reset Method - http://msdn.microsoft.com/en-us/library/ms536721(VS.85).aspx
Mozilla developer center form.reset
I wonder, if you set the page not to be cached through meta tags, will that fix the problem? http://lists.evolt.org/archive/Week-of-Mon-20030106/131984.html If it does, it'll have the benefit of working on browser's with Javascript disabled.
The data on forms are not part of w3c specification. It's a browser feature to make your life easy. So, if you don't want to keep the data after reloads, you can set all form's values to null after loading it, as Espo said.
Even if the page is not cached, it will display the data on the form, because the data aren't part of the page's html code.
You can try this too (don't know if it will work):
<input type="text" name="foo" value="">