Skip to main content

Search and Top Navigation

#7985 closed bug (notabug)

Opened January 05, 2012 10:58AM UTC

Closed January 05, 2012 01:20PM UTC

Last modified June 18, 2015 01:19PM UTC

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:
Description

Hi,

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">

</form>

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.

Example

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"
	type="text/javascript"></script>
<script
	src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"
	type="text/javascript"></script>
<link rel="stylesheet"
	href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css"
	type="text/css" media="all" />
<title>Test calendar</title>
</head>
<body>
	<br />
	<br />
	<br />
	<form id="form1">
		<input type="text" id="f1" name="nf1"></input><br /> <input
			type="text" id="f2" name="nf2"></input><br />
	</form>
	<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 />
	</form>

	<script>
		$(function() {

			$("#form1 #f1").datepicker();
			$("#form1 #f2").datepicker();
			
			$("#form2 #f1").datepicker();
			$("#form2 #f3").datepicker();
		});
	</script>


</body>
</html>

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

Attachments (0)
Change History (2)

Changed January 05, 2012 01:20PM UTC by scottgonzalez comment:1

resolution: → invalid
status: newclosed

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

Changed June 18, 2015 01:19PM UTC by olegarius comment:2

I have the same problem.

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