Question

CSS - Triggering a specific label in a collection

Forms

Updated August 18, 2017

asked on August 10, 2017

Good afternoon,

Let's say that I have a collection with one Single-Line field in it. Then I click on the "Add" link to duplicate or triplicate the field. The field comes with its label. So let's say that the label for the Single-Line field is "Test".

So far I've managed to trigger each specific field by doing some type of counter and what not. What I cannot trigger is each specific field label.

An example would be if I wanted to say that in the label for field 2, I want for it to change color or add text to it. If I trigger the field label, all field labels for that particular "q" are updated.

Any suggestions?

Thank you,

Raul Gonzalez

0 0

Answer

SELECTED ANSWER

replied on August 18, 2017 • Show version history

I was able to reproduce the issue, which is very odd because the field IDs increment properly. It might be a bug?

So it looks like the solution is going to involve targeting the Field instead, then navigating up the DOM tree to get to the associated label.

$(".somedrop-down select").each(function() {
    i++; 

    // I changed this variable because you shouldn't have a dash in a var name
    var somedropdown = 'sometest';//$('#Field1\\(' + i + '\\)').val();

    // Find the target field, then the div parent, followed by the cf-label
    var e = $('#Field2\\(' + i + '\\)').parent().siblings('.cf-label');

    if (somedropdown == 'sometest') {
      $(e).html('default value');
    }
    else {
      $(e).html('other value');
    }
});

This worked in my testing, but you might want to make adjustments. The collection labels on my form had a span within a span that held the actual text and the approach you were using wipes those out, so it could impact formatting.

1 0

Replies

replied on August 10, 2017

You could try the nth-child selector. For example, if your collection is #q1, you could do the following to target only the 3rd label:

#q1 label.cf-label:nth-child(3)

or the following to target every 2nd label:

#q1 label.cf-label:nth-child(2n)

The "n" value makes it pretty dynamic so 3n would be every third, 4n would be every 4th, etc. You also do things like (2n-1) so it will do every other match starting at the first match instead of the second.

Alternatively, you can also target specific rows of a collection by using the attribute selector in combination with the "for" attribute Forms assigns to identify rows.

For example, if I want to target all 2nd instances of a field label from a collection, I could do the following:

#q1 label.cf-label[for$="(2)"]

This will grab any field label that is part of a collection, such as Field1(2), Field14(2), etc.

If you want to target only the second instances of a specific field, you can instead look for an exact match on the for attribute. For example,

#q1 label.cf-label[for="Field1(1)"]

You can add the "#q" selector to narrow it as well. Just go into a browser, right-click and inspect one of the labels and take a look at the formatting.

1 0

replied on August 11, 2017 • Show version history

Thank you Jason,

For some reason all the labels of the same field in the collection still change. This is more or less what I have

  var i = 0;
    
    $(".somedrop-down select").each(function() {
      
    i++; 
      
  var somedrop-down = $('#Field1\\(' + i + '\\)').val(); 

if (somedrop-down == 'sometest') {

$('#q2 label.cf-label:nth-child(' + i + ')').html('default value');

}
else
{
$('#q2 label.cf-label:nth-child(' + i + ')').html('other value');
}



  });

So basically I'm trying to change the label of field two, depending on the choice of field one, but only for that particular set of the collection, not all labels of field two in all the collection.

0 0

replied on August 15, 2017

Raul,

I think the problem you're running into is that the nth-child selector looks at elements with the same parent, so you could run into multiple "1st" children if you don't narrow the selector scope.

For example, you're targeting #q2, and the nth-child labels of #q2, so you're going to get the nth-child of each collection, not the nth-child of the entire section. There are two things you can try.

1. Add another selector between #q2 and label that targets the nth-child ul element with the 'rpx' class (probably not the best solution)

2. Use the label.cf-label[for="Field1(1)"] selector instead because it will not present the same challenges as nth-child. Just make sure to replace 'Field1' with the id of the field you're trying to target.

0 0

replied on August 18, 2017

I've been playing with it a little more and tried your second solution, but still get the same result in that all the labels change.

var i = 0;
    
    $(".somedrop-down select").each(function() {
      
    i++; 
      
  var somedrop-down = $('#Field1\\(' + i + '\\)').val(); 

if (somedrop-down == 'sometest') {


 $('#q2 label.cf-label[for="Field2(' + i + ')"]').html('default value');

}
else
{

 $('#q2 label.cf-label[for="Field2(' + i + ')"]').html('other value');

}



  });

I was thinking that I could maybe stick a class right into the Field Label like <span class="somename"+i>somefield</span>, but didn't work. :(

0 0

replied on August 18, 2017

Another thing that I noticed is that when you add two or three more items in the collection, no matter which label you view its element, it always reads.

Of course, the Field can say Field7 or 9, but the number inside of the parenthesis is always (1)

0 0

SELECTED ANSWER

replied on August 18, 2017 • Show version history

I was able to reproduce the issue, which is very odd because the field IDs increment properly. It might be a bug?

So it looks like the solution is going to involve targeting the Field instead, then navigating up the DOM tree to get to the associated label.

$(".somedrop-down select").each(function() {
    i++; 

    // I changed this variable because you shouldn't have a dash in a var name
    var somedropdown = 'sometest';//$('#Field1\\(' + i + '\\)').val();

    // Find the target field, then the div parent, followed by the cf-label
    var e = $('#Field2\\(' + i + '\\)').parent().siblings('.cf-label');

    if (somedropdown == 'sometest') {
      $(e).html('default value');
    }
    else {
      $(e).html('other value');
    }
});

1 0

replied on August 18, 2017

Yes. Thank you Jason, your solution worked without modification at all. I was able to plug it in without an issue.

Thanks again,

Raul Gonzalez

0 0

You are not allowed to follow up in this post.

Question

Question

CSS - Triggering a specific label in a collection

Answer

Replies

Sign in to reply to this post.