How to change end date automatically after changing start date?

Question

I would like to be able to automatically change the value of the end date to be the same as the start date after changing the start date.

Ex: right after changing the start date to 12-12-12, the end date would be the same.

Here's what I did so far:

Added the following code in a custom module (form_modif) :

$form['#attached']['js'][] = drupal_get_path('module', 'form_modif') . '/custom_alter.js';

Witch seems fine, I can see that the script is added in the code source of the page

The JS file's code is :

(function ($) { 
  Drupal.behaviors.form_modif = { 
    attach: function(context, settings) { 
      $('.field_date_1').change(function(){
        $field_date1 = $(.FIELD_DATE_2').val();
        $('.field_date_2').val($field_date1);
      });
    } 
  }; 
});(jQuery);

And that's where my problem seems to be, I'm not very good in JS, could someone help me with that?

Here's the HTML code of thoses fields if that can help:

Start date field:

<input class="date-clear form-text hasDatepicker date-popup-init" type="text" id="edit-field-date-und-0-value-datepicker-popup-0" name="field_date[und][0][value][date]" value="31/01/2014" size="20" maxlength="30">

End date field:

<input class="date-clear form-text hasDatepicker date-popup-init" type="text" id="edit-field-date-und-0-value2-datepicker-popup-0" name="field_date[und][0][value2][date]" value="31/01/2014" size="20" maxlength="30">

Answer 1

I did it the way pretty much mentioned in question with some corrections.

My code with javascript file is

// Change the end date value to same as that of start date.
Drupal.behaviors.form_modif = {
  attach: function (context, settings) {
        $('input#edit-field-event-date-und-0-value-datepicker-popup-0').change(function(){
        var field_date1 = $('input#edit-field-event-date-und-0-value-datepicker-popup-0').val(); 
        $('input#edit-field-event-date-und-0-value2-datepicker-popup-0').val(field_date1);
    });
  }
};

}(jQuery));

Answer 2

As Kari stated, your selectors looks odd comparing to the HTML you provided.

When you're doing this in jQuery : $('.field_date_1') that means you want to select all DOM elements with the class "field_date_1". As we can see in your HTML, there is no such class for your elements.

What you have for both class elements is : date-clear form-text hasDatepicker date-popup-init. As they are the same for both input, you can't distinguish them using class.

You need to find another way of selecting your elements. I would advise you to take a look at some jQuery tutorials, like this one, so you can find the right way to select your inputs.

For example, you could try $('input').first() to select the first input of your page, or $('.my-form-element input').first() to select the first input inside the DOM element with the class "my-form-element", etc.