Technically they do work like other fields for the most part. Even if you set a normal field equal to a dataset variable you would get the same results.

The key difference is that you can use functions to reference field value changes for a field, but that option is not available for custom HTML.

Here's a function I use that makes things a bit more dynamic. To make this work, I place a child div where I want the text to go, then set a name attribute that is equal to the Variable name of the source field.

I give each of those "source" fields a class like "updateField" and attach the following to the change event to map the values.

function mapData(e){
  var value = '';
  
  // radio fields
  if(e.hasClass('dataRadio')){
    value = e.find('.cf-field input:checked').val();
  }
  // input fields
  else {
    value = e.find('.cf-field :input').val() || $(e).find('.cf-field div[type]:eq(0)').html() || '';
  }
  
  // get the variable name of the trigger field
  var name = e.attr('attr');
  
  // update display field value
  $('div[name="' + name + '"]').html(value.replace(/\n/g,'<br>'));
}

If you only have a couple fields, it may be easier to do a function for each, but this approach is pretty dynamic and makes mapping fields to Custom HTML a bit easier to manage.

Actually, inserting a variable works well with other field types.  Here's an example of something I do occasionally.  A school year is passed in via the url and I use it to get last year dynamically.  (Previously they would have a form for each year...ugh)  I create a field that contains this

which results in...

I will hide that field and then be able to use it as a replacement value in headings, labels, paragraphs, etc.

I'm confident that this functionality works due to an event bound to the Year field.

Technically, probably not part of the dataset yet, but it is a much easier way to deal with field variables.  That is how I was hoping the custom html was going to work, but, alas, no go.

thanks...

The key difference is that what you're showing above is a Function (Calculation) using a form variable (live), not a dataset variable (stored).

As an example, if you try to use the dataset variable in the Default Value, it would behave exactly the same as the custom HTML.

Functions on the other hand auto-execute built-in scripts when fields change using the active form's values. Dataset variables are static values from the database.

Hopefully that clarifies my other post a little bit more.

@Jason Smith -

Would you call that function with something like this?:

$('.updateField input').on('change', mapData(e)); 

Would that go inside or outside of the $(document).ready function?  What would you put for the (e)?  I'm assuming the function mapData would go outside of the $(document).ready function...correct?

Thanks.

@████████

I'd wrap it in an anonymous function like this:

$('.updateField input').on('change', function(){
        mapData($(this));
}); 

You don't necessarily need that e variable passed into the mapData function unless there's something special you need to do because you could use $(this).val() to get it inside of mapData.

The event handler assignment above should go inside of document ready.

The actual function should be defined outside of document read.

@████████ - Got it...next question:  Would the "child div" you mentioned go in the Custom HTML element using the HTML editing tab and look something like this?:

I, <div name="FirstName"></div>, hereby consent to my employer...etc.

where "FirstName" is the variable for the field to which I assigned the updateField CSS class?

Mike,

Sorry I neglected to look at my other post before I replied. If you use my previous sample code, then the e would actually be needed.

In that code, you would pass in $(this) to populate "e" (I'll update my previous response)

And yes, that's correct. It can be a span instead of a div also if you want.

Sorry, this is from a long time ago so my tactics have evolved and I had to go back and look at the form I used this for.

Jason,

I'm having a bit of a challenge with this, probably because the field I'm updating is a Custom HTML field.  I tried updating the code so the input field section is pointing to cf-custom instead of cf-field, but I haven't been able to get it to work yet.  Any suggestions?  Thanks, Mike.

// input fields
  else {
    value = e.find('.cf-custom :input').val() || $(e).find('.cf-custom div[type]:eq(0)').html() || '';
  }

Mike,

The code was already set up to update the value in a custom HTML element. The .cf-field selector is for the source data which should be a field.

The e.find code is not targeting the parts that will be changed, that is what is pulling the dynamic value from the other parts of the form.

Jason,

I changed the code back to the original reference to cf-field.  It still doesn't work so I must be doing something wrong.  I verified that my CSS class is set to updateField on my source field and the div name in the custom HTML field matches my input field (FirstName).  I checked the console and there aren't any syntax errors so I'm not quite sure what to check next.  Any suggestions?

Thanks.

It's really hard to say without seeing the full code. 

The issue might be that the code I posted back in 2019 wasn't running on a change event it was being triggered on document ready to loop through certain items.

The "change" event code in my first reply to you is sending back the input as e instead of the parent, so it's probably not getting what it is expecting.

Try changing that piece to the following:

$('.updateField input').on('change', function(){
        mapData($(this).parents('.updateField'));
}); 

Yes, that worked.  Thank you!