Opened 11 years ago

Closed 11 years ago

Last modified 8 years ago

#7985 closed bug (notabug)

DatePicker - Calendar, the wrong field is updated

Reported by: gabriel.klein Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.datepicker Version: 1.8.16
Keywords: Cc:
Blocked by: Blocking:



I have multiple forms, with the same fields ids. (Example: you display multiple items of the same type in different forms, it makes sense to have the same ids and names.)

<form id="formUser1">

<input type="text" id="f1abcdef">

</form> <form id="formUser2">

<input type="text" id="f1abcdef">


The DatePicker is displayed correctly, at the correct position on both field.

When I click on the second field/form, the datepicker popup at the right position, but the value is updated only in the first field. It means that when I try to change the date on the second field, the date on the first field is updated with a new value.

This issue was tested on IE9, Firefox 8.


<script src=""
<link rel="stylesheet"
	type="text/css" media="all" />
<title>Test calendar</title>
	<br />
	<br />
	<br />
	<form id="form1">
		<input type="text" id="f1" name="nf1"></input><br /> <input
			type="text" id="f2" name="nf2"></input><br />
	<hr />
	<form id="form2">
		This field doesn't work, id="f1" is similar to the id of the first form.<br />
		'''<input type="text" id="f1" name="nf1"></input><br />'''
		Here it works<br />
		<input type="text" id="f3" name="nf3"></input><br />

		$(function() {

			$("#form1 #f1").datepicker();
			$("#form1 #f2").datepicker();
			$("#form2 #f1").datepicker();
			$("#form2 #f3").datepicker();


Workaround: Know that you have an issue - and have a different id each time.

Change History (2)

comment:1 Changed 11 years ago by Scott González

Resolution: invalid
Status: newclosed

It's invalid to have multiple fields with the same id.

comment:2 Changed 8 years ago by olegarius

I have the same problem. Even if I change #f1 to .f1 - the problem are not disappear.

Note: See TracTickets for help on using tickets.