Question

Targeting a Custom HTML field

Forms

Updated December 5, 2017

asked on December 4, 2017

Good afternoon,

I' have a collection and inside a collection I have a Single Line field and a Custom HTML field. I'm trying to target the Custom HTML field, based on its accompanying Single Line field, but I'm having problems figuring out how.

Let's say that I can say something like:

var field = $('#Field(1)').val();

How can I do the same thing with the Custom HTML field? There doesn't seem to be a numbering system for this.

Any ideas or suggestions?

Thank you,

Raul Gonzalez

0 0

Answer

SELECTED ANSWER

replied on December 5, 2017

Got it!

$( document ).ready(function() {
  $('.cf-collection-append, .cf-collection-delete').click(function() {
    console.log('checkall');
    setTimeout(checkall(),1);
  });
  
  $('.pastDate').hide();
  $(document).on('blur change', '.test input[type=text]', function()
  {
    var val = $(this).val();
    var e = $(this).parents('li').next().find('.pastDate');
    if(val == 'test')
    {
      e.show();
    }
    else
    {
      e.hide();
    }
                   
  });
  function checkall()
  {
    $('.cf-collection>div.form-q>ul>li.test input[type=text]').each(function() {
      var val = $(this).val();
      var e = $(this).parents('li').next().find('.pastDate');
      if(val == 'test')
      {
        e.show();
      }
      else
      {
        e.hide();
      }
    })
  }
         
});

1 0

Replies

replied on December 4, 2017

Hey,

You can do something like this.

$("#Field11\\(2\\)").parents('li').next().find('div p').text();

You'll need to change it to suit your needs but that's should work as a starting point.

1 0

replied on December 4, 2017

Thanks Aaron,

My Custom HTML has a class of pastDate and the HTM is <span class="pastDate">test</span>

My field is a calendar picker and it has an id of 31

I tired the following without success:

var e = $('#Field31\\(1\)').parents('li').next().find('div p span').text();

0 0

replied on December 4, 2017

Hey,

Try this.

var e = $('#Field31\\(1\\)').parents('li').next().find('.pastDate').text();

0 0

replied on December 5, 2017

Ah, see that's a whole other thing. the way I understood it was you were targeting a box specifically. If this is to be dynamic then its more complicated.

Leave it with me for a min and ill see what I can do.

1 0

replied on December 5, 2017

I'm glad it worked for you mate.

Happy to help :)

1 0

replied on December 5, 2017

Aaron thanks,

I created a form from scratch to follow your suggestion.

One collection

One single line inside the collection with variable: test

One custom HTML inside the collection with HTML: <span class="pastDate">test</span>

#Field4 is the single line test field. When I type "test" in the test box, it displays the Custom HTML "test". However, when I click the "add" link to add a second item in the collection, the "test" label carries over to the next item in the collection. I'm looking for a way to only display "test" when the box contains "test".

Will keep trying.

SCRIPT:

$( document ).ready(function() {
  
  $('.pastDate').hide();
  $(document).on('blug change', '.test input', test);
  
  function test() {              
  
  var test = $('#Field4\\(1\\)').val();
  var e = $('#Field4\\(1\\)').parents('li').next().find('.pastDate').text();

        if (test == 'test') {

           $('.pastDate').show();

        }
        else
        {
          $('.pastDate').hide();
        }
        
  }
             
});

Test.PNG (7.65 KB)

| Download

0 0

replied on December 5, 2017

I was trying to do something similar to what I've done when targeting a specific label in a filed inside a collection, but that didn't work for targeting the custom HTML. In the other scenario I was using an increment to target just the label of that specific field like:

Will keep trying. Thanks for sticking with this with me.

$( document ).ready(function() {
  
  $('.pastDate').hide();
  $(document).on('blug change', '.test input', test);
  
function test() {  

var i = 0;
    
    $(".test input").each(function() {
      
    i++; 
      
  var test = $('#Field43\\(' + i + '\\)').val(); // the value of the selected option from the drop-down menu TransactionType
  var e = $('#Field4\\(' + i + '\\)').parent().siblings('.cf-label');

        if (test == 'test') {

           $('.pastDate').show();

        }
        else
        {
          $('.pastDate').hide();
        }

        }); 
        
  }
             
});

0 0

replied on December 5, 2017

Aaron, you have to show me some of your magic tricks, this worked great!!!

I plugged it in without any changes and it did what I envision it doing. You sir are a genus.

Thanks again for sticking with it Aaron.

Sincerely grateful

-Raul

AaronFix.PNG (7.3 KB)

| Download

0 0

You are not allowed to follow up in this post.

Question

Question

Targeting a Custom HTML field

Answer

Replies

Sign in to reply to this post.