Firefox 3.5.2 Refresh (F5) causes the form value to be highlighted for the next field

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

I've included enough code so you can just understand what I am trying to do. Again the rendering is good and the final preview / HTML is fine. This is what I see on the screen is wrong. I am using hidden vars; but the problem occurred before using it too.

Note that in the code below, I have two different id fields: "date_ {projectTask.ProjectTaskId}" and "finishDate_ {projectTask.ProjectTaskId}, which gets the visual expression" 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 display variables in the Spark View engine.

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

The problem comes when I just update F5; for some reason, the "finishDate_1" value is filled with the "date_1" value.

This problem occurs simply by clicking "date_1" and pressing F5; so the adjacent field is just populated even if there are no AJAX calls.

Here is the Javascript code I call at 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 is copied before any Javascript code is processed because I am calling the Javascript code at the end of the body after all the HTML has been output. So my guess is this is an update issue in Firefox? What do you guys think?

As you can see above, I've created my own calendar date picker objects that allow you to either manually enter a date into the text, or click a button to view the calendar and select a date. Once the date is entered or selected, an AJAX call will be made to update the database at the back end.

Thanks everyone for the quick answers.