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.
It's invalid to have multiple fields with the same id.