How to add variable to custom HTML?

SELECTED ANSWER

replied on May 29, 2020

In addition to Jason's post, if you have the name field on your form, you can use JavaScript to update the HTML field when they enter their name.

First, apply the CSS class "oath-name-field" to the name field on the Advanced tab:

Then add this to the start of the HTML field, adding the rest of the oath replacing the ellipsis (...). You should paste this in on the HTML tab, and then you can switch to the Visual tab for the rest, if you want.

<p>I, <span id="oath_name"></span>, do solemnly ...</p>

Then add this JavaScript:

$(document).on("change", ".oath-name-field", function() {
  $("#oath_name").text($(".oath-name-field input").val()).change();
});

0 0

View 2 previous replies

replied on May 29, 2020 • Show version history

This is great! Does this variable carry over to a PDF?

0 0

replied on May 29, 2020

Actually add this additional JavaScript and then I'm 98% sure it will:

$(document).ready(function() {
  $("#oath_name").text($(".oath-name-field input").val()).change();
});

1 0

replied on May 29, 2020 • Show version history

That actually won't work with the PDF because the input fields are converted to div elements. To get it to work on the PDF you need to handle it more like this:

$(document).ready(function(){
  var name = $('.oath-name-field').find('input').val() || $('.oath-name-field').find('div[type="text"]').html() || '';
  $('#oath_name').text(name);
});

This is a dynamic function that should find the input on the interactive form, or the div equivalent on the read-only/printable or PDF versions depending on which one exists, and populate the value accordingly.

If you need something that can deal with textarea and other field types, you could try replacing div[type="text"] with div.ro

2 0

replied on May 29, 2020

Jason, adding this javascript causes the other javascripts to not run.

0 0

replied on May 29, 2020 • Show version history

The code was missing a closing bracket, I updated it to fix the issue.

I'd highly recommend using the browser dev console when you have problems like that because it might have error messages that can really help narrow down the issue.

0 0

replied on May 28, 2020

There's a couple things to consider with this approach:

Variables only have values after a form is submitted
Variables do not populate in Custom HTML on saved forms

For the first item, what I mean is that the variables are not updated in real time, so if you enter your name on a form, the variables value isn't actually populated until you submit meaning variables are only available in subsequent tasks.

For the second item, if your value was saved in a previous submission then it could be used to display text on a form, but when you save it to the repository it will still be blank, so it really depends on when your value is populated and where it needs to be shown/saved.

1 0

Question

Question

How to add variable to custom HTML?

Answer

Replies

Sign in to reply to this post.