Dynamic jQuery event handler

Question

I have been trying to create a dynamic jQuery code to handle an .change event with a list dropdown in drupal. I got it to work properly when hardcoding in the div id like so:

jQuery(document).ready(function($) {
    $("#edit-submitted-row-1-program").change(function() {
        if($(this).val() === 'DreamSpark Standard'){
            $("label[for='edit-submitted-row-1-extended-department-name'").html('Campus Name');
            console.log('Yes it is supposed to change!');
        } else {
            $("label[for='edit-submitted-row-1-extended-department-name'").html('Extended department name');
        }
        console.log($(this).val());
        }).change();
    }
});

This is supposed to change the label above one of the input fields (as shown below) if 'DreamSpark Standard' is selected.

However, what I want to end up doing is something like this:

Dynamic line adding

Where you can add as many lines as you need, and the event handler will change the label of the appropriate label.

I have tried the following code, but it is definitely wrong, as I'm just doing a for() loop when I know I should be doing a foreach() or something similar.

jQuery(document).ready(function($) {
    for ( var i = 0; i < 5; i++) {
        $("#edit-submitted-row-" + i + "-program").change(function() {
            var j = i;
            if($(this).val() === 'DreamSpark Standard'){
                $("label[for='edit-submitted-row-" + j + "-extended-department-name'").html('Campus Name');
                console.log('Yes it is supposed to change!');
            } else {
                $("label[for='edit-submitted-row-" + j + "-extended-department-name'").html('Extended department name');
            }
            console.log($(this).val());
        }).change();
    }
});

Here is the snippet of HTML code that matters:

<div id="webform-component-row-1" class="webform-layout-box horiz">
    <div class="form-item webform-component webform-component-textfield" id="webform-component-row-1--subscription-id">
        <label for="edit-submitted-row-1-subscription-id">Subscription ID <span class="form-required" title="This field is required.">*</span></label>
        <input type="text" id="edit-submitted-row-1-subscription-id" name="submitted[row_1][subscription_id]" value="" size="18" maxlength="128" class="form-text required" />
    </div>
    <div class="form-item webform-component webform-component-select" id="webform-component-row-1--program">
        <label for="edit-submitted-row-1-program">Program <span class="form-required" title="This field is required.">*</span></label>
        <select id="edit-submitted-row-1-program" name="submitted[row_1][program]" class="form-select required"><option value="" selected="selected">- Select -</option><option value="DreamSpark Premium">DreamSpark Premium</option><option value="DreamSpark Standard">DreamSpark Standard</option><option value="Other">Other</option></select>
    </div>
    <div class="form-item webform-component webform-component-textfield" id="webform-component-row-1--extended-department-name">
        <label for="edit-submitted-row-1-extended-department-name">Extended department name </label>
        <input type="text" id="edit-submitted-row-1-extended-department-name" name="submitted[row_1][extended_department_name]" value="" size="26" maxlength="128" class="form-text" />
    </div>
</div>

(Each row will be incremented by 1, so the next row would be 'webform-component-row-2' and so on)

Keep in mind I can't add data- tags or extra stuff in the HTML markup as it through drupal, and I just have to work with the given classes and ID's output!

Thanks guys!

Arun P Johny · Accepted Answer · 2014-02-25 15:22:46Z

1

There is no need to use a loop, you can write a generalized code using the class selectors.

<div id="webform-component-row-1" class="webform-layout-box horiz">
    <div class="form-item webform-component webform-component-textfield" id="webform-component-row-1--subscription-id">
        <label for="edit-submitted-row-1-subscription-id">Subscription ID <span class="form-required" title="This field is required.">*</span></label>
        <input type="text" id="edit-submitted-row-1-subscription-id" name="submitted[row_1][subscription_id]" value="" size="18" maxlength="128" class="form-text required" />
    </div>
    <div class="form-item webform-component webform-component-select" id="webform-component-row-1--program">
        <label for="edit-submitted-row-1-program">Program <span class="form-required" title="This field is required.">*</span></label>
        <select id="edit-submitted-row-1-program" name="submitted[row_1][program]" class="form-select required"><option value="" selected="selected">- Select -</option><option value="DreamSpark Premium">DreamSpark Premium</option><option value="DreamSpark Standard">DreamSpark Standard</option><option value="Other">Other</option></select>
    </div>
    <div class="form-item webform-component webform-component-textfield" id="webform-component-row-1--extended-department-name">
        <label for="edit-submitted-row-1-extended-department-name" class="edit-submitted-row-extended-department-name">Extended department name </label>
        <input type="text" id="edit-submitted-row-1-extended-department-name" name="submitted[row_1][extended_department_name]" value="" size="26" maxlength="128" class="form-text" />
    </div>
</div>

then

jQuery(function ($) {
    $(".webform-layout-box select").change(function () {
        var $lbl = $(this).closest('.webform-layout-box').find('.edit-submitted-row-extended-department-name');
        if ($(this).val() === 'DreamSpark Standard') {
            $lbl.html('Campus Name');
        } else {
            $lbl.html('Extended department name');
        }
    }).change();
});

Demo: Fiddle

To label added a new class called edit-submitted-row-extended-department-name
We target the change event to the select element inside the .webform-layout-box element
When it is changed find the .edit-submitted-row-extended-department-name element within the same .webform-layout-box and change its text

answered Feb 25, 2014 at 15:22

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ian Ryan Clarke Over a year ago

It looks good! However you seem to have added on a class to the label:

<label for="edit-submitted-row-1-extended-department-name" class="edit-submitted-row-extended-department-name">Extended department name </label>

Even though I cant add that class through drupal. How could I do it using the for`?

Ian Ryan Clarke Over a year ago

I can edit properties, but in drupal, I can't add a class to that label, as drupal dynamically adds the label in :S EDIT: I'll get back to you, I may be able to find a Drupal plugin to allow me to add in a class!

Arun P Johny Over a year ago

@RyanClarke will you be able to add a new attribute

Ian Ryan Clarke Over a year ago

Is there a way I can select the next label after the Select using something similar to what you suggested? I mean instead of looking for a specific class, could I just find the next label and then change that?

Arun P Johny Over a year ago

@RyanClarke if you are not able to add a new class jsfiddle.net/arunpjohny/Uv2h9/3

|

dkasipovic · Accepted Answer · 2014-02-25 15:08:58Z

0

You should really look up

$.on and $.live

as they allow you to bind events for elements that do not exist yet. Then, after that you can continue working on elements.

answered Feb 25, 2014 at 15:08

dkasipovic

6,1301 gold badge23 silver badges27 bronze badges

Collectives™ on Stack Overflow

Dynamic jQuery event handler

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related