Question

I am working on an application form with multiple Date of Birth fields.

I have created a simple date input with select elements. When the select elements change the values are copied into an additional hidden text field to keep the results.

I have written a function that I want to apply to all the instances of this date input, however, it repeats the same values in the additional date inputs after the first has been filled in.

I think it has something to do with how the variables are set for the function.

How can I get the function to apply to each instance I apply it to without repeating the results?

Js Fiddle example here : http://jsfiddle.net/allyreid/JyE8b/5/

Help appreciated.

Answer 1

Here is the fix:

$.fn.dateofbirth = function() {
         return this.each(function() {
              $(this).children('select').change(function(){
                  var cont = $(this).parent();
                  var day = $("select[name='Day']", cont).val();
                  var month = $("select[name='Month']", cont).val();
                  var year = $("select[name='Year']", cont).val();
                  var fullDate = day + " / " +  month  + " / " + year;
                  $(this).parent().find('.result').val(fullDate);

               });
          });
    };

    $('td.dob').dateofbirth();

You problem here is that on the “onChange” event, you’re selecting the values using: $("select[name='Day']").val(); and that is only selecting the FIRST day dropdown, that’s why you always get the same value.

The fix consists on first getting the parent element of the element that originated the change event and then working with the dropdowns that are INSIDE that parent.

If you have questions about the core, let me know.

One more thing

This is what did the trick:

When selecting elements with jQuery, you can specify the container inside where to look for. That’s what I did there, you have $(SELECTOR STRING, container_element)