Updating elements with jQuery selector

Question

I have a situation where I have the following form elements:

<label for="edit-type-config-associated-element--2">Destination Data Element </label>
<input type="text" id="edit-type-config-associated-element--2"
   name="type_config[associated_element]" value="23" size="60" 
   maxlength="128" class="form-text ajax-processed" 
   style="visibility: hidden;">
<input type="text" id="edit-type-config-associated-element--2_display" 
   value="23" size="60" maxlength="128" 
   class="form-text ajax-processed dropdowntree_aux dropdowntree_input valid" 
   readonly="" style="top: 61.515625px; left: 15px; position: absolute; 
   width: 389px; height: 16px;">

I would like to add a change listener to the second input element (identified by edit-type-config-associated-element--2_display) and then change the input in the first input element (identified by edit-type-config-associated-element--2). The catch here is that everytime this form is displayed the number appearing at the end of both ids increments by one (why they couldn't use a consistent id, I have no idea but it is what I am stuck with).

Here is the javascript I am using to try and accomplish this:

// Add a change listener to associated element link for dc mappings
$('.dropdowntree_input').live('change', function () {
    // Get the data element id
    var dataElementID = $.trim($(this).val()),
        dataElementLinks = Drupal.settings.data_element_links;
    console.log('text field has changed to: ' + dataElementID);
    if (dataElementLinks.hasOwnProperty(dataElementID)) {
        $('#linked_form_elements').show();
    } else {
        $('#linked_form_elements').hide();
    }
    // Update the underlying text input to contain the right value.
    $(':input[type="text"][name="type_config[associated_element]"]').val(dataElementID);

However this is not working. It seems that this function is never called when the second textfield is updated.

Any ideas where I have gone off the rails?

Thanks.

Answer 1

Looks like you were missing a [ in your selector

$('input[type="text"][name="type_config[associated_element]"]').val(dataElementID);
                     ^ here

Also if you are using jQuery >= 1.9 then .live() is no longer supported.

If you are using jQuery >= 1.7 then use .on() instead, also since the first and second inputs are next/prev siblings you can use that relationship to find the element

$(document).on('change', '.dropdowntree_input', function () {
    var dataElementID = $.trim($(this).val()),
        dataElementLinks = Drupal.settings.data_element_links;
    console.log('text field has changed to: ' + dataElementID);
    if (dataElementLinks.hasOwnProperty(dataElementID)) {
        $('#linked_form_elements').show();
    } else {
        $('#linked_form_elements').hide();
    }
    //since the hidden element is the previous sibling
    $(this).prev().val(dataElementID);
})