19057

Firefox 3.5.2 Refresh(F5) causes Highlighted Form value to get copied to next field

I am having a strange issue in Firefox 3.5.2 with F5 refresh.

Basically, when I focus on an input field and hit f5 the contents of that input field gets copied to the next form field after the F5 refresh.

But, if you inspect the HTML source code, the values are correctly loaded. I am not having this issue in IE8 or Safari 4.0.3.

The problem does not occur if I do a hard refresh or run window.location.refresh(true).

After F5 Refresh: http://i805.photobucket.com/albums/yy339/abepark/after.jpg

Here's an overview of what's going on.

Answer1:

I believe the thing you should look into is the autocomplete attribute, you should set it to off on the input box. However be careful since this will trigger two effects.

<ol> <li>When you refresh the page it won't remember the old values</li> <li>The default dropdown of the already used values on that input box will also be disabled.</li> </ol>

If you want to keep the second behavior you should set the autocomplete attribute back to on with JS.

Answer2:

Browsers can remember form field contents over a refresh. This can really throw your scripting off if it is relying on the initial value of a field matching what's in the HTML. You could try to prevent it by calling form.reset() at the start.

Different browsers have different strategies for detecting when a form or a field is the same as in the previous page. If you have clashing names, or names that change on reload, it is very possible to end up confusing them. Would have to see some code to work it out for sure.

Answer3:

In the backend, I am using ASP.NET MVC 1.0 with the Spark View engine. When I examine the source code after an F5 refresh in Firefox 3.5.2, the page renders correctly; however, if you look at the page visually the adjacent form field field gets populated with the value from the previous field.

I included enough code so you can just get an idea of what I'm trying to do. Again, the rendering is fine and the final view/HTML code is fine. It's what I see on the screen that is incorrect. I am using hidden vars; but the issue occurred before using it as well.

Note in the code below, I have 2 distinct ID fields: "date_{projectTask.ProjectTaskId}" and "finishDate_{projectTask.ProjectTaskId}, which gets renders to something like "date_1" and "finishDate_2".

<table> <for each="ProjectTask projectTask in projectTasksByProjectPhase"> <input type="hidden" value="${projectTask.ProjectTaskId}" /> <tr> <td class="date"> <div class="box"> <div class="datefield"> <input type="text" id="date_${projectTask.ProjectTaskId}" value="${startDate}" /><button type="button" id="show_${projectTask.ProjectTaskId}" title="Show Calendar"><img src="~/Content/yui/assets/calbtn.gif" width="18" height="18" alt="Calendar" ></button> </div> </div> </td> <td> <div class="box"> <div class="datefield"> <input type="text" id="finishDate_${projectTask.ProjectTaskId}" value="${finishDate}" /><button type="button" id="finishShow_${projectTask.ProjectTaskId}" title="Show Calendar"><img src="~/Content/yui/assets/calbtn.gif" width="18" height="18" alt="Calendar" ></button> </div> </div> </td> </tr> </for> </table>

FYI: ${} are used to output variables in the Spark View engine.

I am also using the YUI 2.7 Connection to make Ajax calls to update the datebase for "change" and "enter/tab key press" events. I am able to verify that the AJAX calls are made correctly and the form field values are still valid.

The problem occurs when I just do a F5 refresh; for some reason, the "finishDate_1" gets populated with the value from "date_1".

This problem occurs just by clicking on "date_1" and hitting F5; so, the adjacent field just gets populated even if there are no AJAX calls.

Here's the Javascript code I call towards the end of the body"

YAHOO.util.Event.onDOMReady( function() { var idList = YAHOO.util.Dom.getElementsBy(function (el) { return (el.type == 'hidden'); }, 'input'); len = idList.length; var startDatePickers = new Array(); var finishDatePickers = new Array(); for (var i = 0; i < len; i++) { var id = idList[i].value startDatePickers[i] = new DatePicker("date_" + id, "show_" + id, "cal_" + id); startDatePickers[i].valueChanged.subscribe(updateDate, 'S'); finishDatePickers[i] = new DatePicker("finishDate_" + id, "finishShow_" + id, "finishCal_" + id); finishDatePickers[i].valueChanged.subscribe(updateDate, 'F'); } } }

The form field gets copied over before any Javascript code is processed because I call the Javascript code towards the end of the body after all HTML is rendered. So, I'm guessing it's a refresh issue in Firefox? What do you guys think?

As you can see above, I created my own calender date picker objects which allows you to either enter the date in the text manually or by clicking on a button to view the calendar and select a date. Once you enter or select the date, an AJAX call will be made to update the datebase in the back end.

Thanks everybody for the quick responses.

Answer4:

@Anonymous: whoever you are, you are awesome!

@bobince: thanks for the feedback as well.

I added a dummy form tag with the attribute autocomplete="off" and that solved the problem! I was scratching my head because I didn't get this issue in Safari 4.0.3 or Internet Explorer 8.

<form action="" autcomplete="off"> <!-- my code --> </form>

The values were loading correctly in the back end (ASP.NET MVC 1.0/Spark View engine) and the HTML source code reflected this, but the input field values were not getting populated correctly. I was using the YUI Connection Manager and Javascript to support edit-in-place and the date pickers. I tried changing the XHR call to a GET call instead of POST and the same issue was happening.

Anyway, the problem was that the Firefox was not setting the correct values for the input fields for F5 refreshes.

Again, thanks so much! You guys rock!

Answer5:

All element id's must be unique, if two elements have same id's then that could be reason why Firefox inserts same values to elments that didn't orginally have those values entered.

Answer6:

I had a similar problem related to my question at Input control shows incorrect value, even 'though inspect element shows the right value is there

The problem occurred for me in Firefox, but not Chrome, for some but not all controls on the form, and when I pressed F5, but not ctrl-F5.

The "dummy form" seems to have resolved it for me.

Recommend

  • Can an entity be unloaded from entity framework's ObjectStateManager?
  • jquery ajax bug
  • view SQLite Databases in android listview?
  • How do I see existing classes
  • Work around for HTML stripping quotes in quirks mode?
  • new spark.sql.shuffle.partitions value not used after checkpointing
  • javafx 3d performance large data set
  • detecting connection lost in spark streaming
  • How to trick Node.js to load .js files as ES6 modules?
  • How to bind comma separated list of values to List
  • How to check if DIV element is disabled using jquery
  • Rails 5 - Google Maps - Javascript error - initMap is not a function - fixing one js issue creates a
  • Mixing WebForms and MVC: What should I do with the MasterPage?
  • How to render a pixel array most efficiently to a window in c++?
  • Installing PHP 7 on digitalocean
  • Detect when Facebook like button is clicked
  • Parsing a CSV string while ignoring commas inside the individual columns
  • Webgrid not refreshing after delete MVC
  • MVC3 Razor - ListBox pre-select not working
  • Bad request using file_get_contents for PUT request in PHP
  • Error when parsing timestamp with pandas read_csv
  • Spark fat jar to run multiple versions on YARN
  • Display issues when we change from one jquery mobile page to another in firefox
  • Read text file and split every line in MSBuild
  • C# - Serializing and deserializing static member
  • Get object from AWS S3 as a stream
  • Java applet as stand-alone Windows application?
  • Cross-Platform Protobuf Serialization
  • SSO with signing and signature validation doesn't work
  • Validaiting emails with Net.Mail MailAddress
  • Deserializing XML into class C#
  • Do I've to free mysql result after storing it?
  • Is there a mandatory requirement to switch app.yaml?
  • Cannot Parse HTML Data Using Android / JSOUP
  • Error creating VM instance in Google Compute Engine
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • What are the advantages and disadvantages of reading an entire file into a single String as opposed
  • Getting Messege Twice Using IMvxMessenger
  • costura.fody for a dll that references another dll
  • How to load view controller without button in storyboard?