I have a form which a user can create data with and some of the fields are date fields which use jQuery datepicker.

The form is long and in order to help the user out, I have a series of help messages which appear when the relevant form input is focused.

When a form element is given focus, the form's ID is grabbed and attached as a class to the help div, which reveals the correct help message.

Example: jsfiddle - caveat in a moment

This works in the jsfiddle, however in Drupal it breaks. On click the calender opens but rather than selecting a link it hits the local hyperlink "#" below it and changes the url to http://mywebsite.com/form/#

The problem appears to be related to how the Drupal date jQuery module deals with Datepicker. I've narrowed it down to something to do with $(this).attr('id'), it doesn't like the that selector but I'm unsure as to why.

Full Script

  Drupal.behaviors.jobhelpAddClass = {
    attach: function (context, settings) {

      var jobHelp = $('#jobhelp').children();

      $('input, select').focus(function() {
        $(jobHelp).attr('id', $(this).attr('id'));

I've tried with document ready instead of Drupal behaviours and it still breaks. I've also tried getting focus to call a function (with the same code), however neither works.

1 Answer 1


Looks like the problem is with the CSS rather than the id part. The typical id would be something like this: edit-field-date-und-0-value-datepicker-popup-0 and this id is dynamically generated and not grandee that it would stay same (i.e. you may get edit-field-date-und-0-value-datepicker-popup-1 if you have the same field twice in the same form).

You can use name instead of id. Here is the working fork of your jsfiddle with name: http://jsfiddle.net/vijaycs85/C4sh9/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.