Hey team,

Because I feel like I'm missing something simple here (because I'm no Javascript expert), I figured I'd reach out to the community to see if anyone has some ideas on how best to approach this.

We have a lot of forms that use look ups and in an effort to make things extremely user friendly, and in some cases to help "show" users the final contract wording before submission, we use a few tricks to target and replace spans within Custom HTML blocks within forms.

What that means is transforming this:

Into this:

As you can see above, as soon as information is entered/edited/returned from a lookup, the "Great News!" Custom HTML block immediately updates to show the Employee's first name and their Employee number, live.

This is cool because using field rules, you can hide/show these Custom HTML blocks based on whether a lookup contained a value or not. Hence the second Custom HTML block that Warns when an Employee ID isn't found.

However, the method we're using doesn't seem to allow you to target all instances of the target span in a form (e.g. the success AND the warning prompt) using the technique we've strung together.

I was hoping it was something I'm simply overlooking in the Javascript - so I'm asking if anyone may know a better approach to live replacing content in Custom HTML?

To understand how we got this far (live replace), the approach used is explained below:

Firstly, on your input fields - e.g. First Name and Employee ID, add a unique class that we can target later using Javascript.

This unique class is important, because we'll be using Javascript to watch this input field for changes. Do the same for the Employee First Name input field, too.

Now, drag a few Custom HTML blocks on to your page. No classes required, just the special span tags that we'll target using Javascript when we detect a change in an input field.

Successful Prompt HTML:

<p>Looks like the lookup was successful <b><span id="EMPFirst"></span></b>! We think your employee number is<b> <span id="EMPID"></span></b>.</p>

Unsuccessful Prompt HTML:

 <p>Hey <b><span id="EMPFirst"></span></b>, looks like we couldn't find your employee number!</p>

Now for the Javascript code that waits for a change in the input field before it updates appearances of the span ID's mentioned earlier.

Head to your CSS/Javascript page and add the following to the Javascript section:

// Live Variables v1
$(document).on("change", ".EMPFirst", function() {$("#EMPFirst").text($(".EMPFirst input").val()).change();});
$(document).on("change", ".EMPID", function() {$("#EMPID").text($(".EMPID input").val()).change();});

Now when you load the form, and change (via lookup or editing the input field) the first instance on the page to use the named span IDs above will be automatically replaced with the text value from the input. For example, EMPFirst will change to the firstname entered in the Employee First Name field.

So the issue is, it only works on the first appearance of EMPFirst. I've tried quite a few different approaches using JQuery .each() and for whatever reason, I just can't get it to iterate past the first occurrance of EMPFirst on the form. So it doesn't appear in the Warning prompt in the second Custom HTML block. I'm sure I'm missing something basic and I'm by no means a Javascript expert.

Any assistance to get this to iterate past the first span on the page would be greatly appreciated!

PS. As an aside for anyone wanting to use this trick for themselves, note that if you want the "live variables" contained in the Custom HTML block to "stick" in place when stored as a PDF Form to the repository you'll also need to add the below for each unique ID:

// Live Variables to PDF v1
$(document).ready(function(){
var name = $('.EMPFirst').find('input').val() || $('.EMPFirst').find('div[type="text"]').html() || '';$('#EMPFirst').text(name);
var name = $('.EMPID').find('input').val() || $('.EMPID').find('div[type="text"]').html() || '';$('#EMPID').text(name);
});

Thanks again team!

cc: Resident Experts
@████████ / @████████