Insert field contents in HTML Script

[psamuels56]

I'm working on an application where I've placed an HTML Script into a Free-Form Layout Container on a UX (see script below). The script displays a "countdown timer". It works perfectly! In the script you'll notice that the countdown timer (hours and minutes, only) tells you how many hours and minutes remain between now and "12/3/19 11:05" (Date and Time).

<p id="demo"></p>

<script>
//var getmydate = {testfield1}
var getmydate = "12/3/19 11:05";
var countDownDate = new Date(getmydate).getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

document.getElementById("demo").innerHTML = "Estimated to be done in "+hours + " hours and " + minutes + " minutes";

// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "Overdue";
}
}, 1000);
</script>

I want to change the ending time ("12/3/19 11:05") to the variable value of a TextBox on the UX, but I don't know how to do that. I tried setting the value of "getmydate" (in the script above) as "getmydate = {testfield1}" (where testfield1 is a textbox on the UX)... BUT that didn't work.

Maybe I shouldn't be using a free form layout container, because there's a better place for my HTML Script, but I just don't know where to go. I'm hoping someone can tell me:

1. How to populate the script with the contents of a UX Control; and
2. If there's a better place to put this very small HTML script.

I'd appreciate any help.

[ColinJD]

Re: Insert field contents in HTML Script

https://documentation.alphasoftware....e%20Method.xml

unsure if this is what you need,

so

var getmydate= {dialog.object}.getValue('testfield1');

[WebDesignShop]

Re: Insert field contents in HTML Script

I would put the script in a separate javascript function which returns the whole thing. In the function you can call the field values is indicated by Colin. Then, you can simply display the results in any HTML capable field.

[Davidk]

Re: Insert field contents in HTML Script

Both Colin and Sean are right, but you're not getting a full picture. Testing solutions is always recommended.

If you want to use a <script> and a Freeform Layout container...

You'll need to move some code to inside your setInterval function. This works...

<script>
// Update the count down every 1 second
var x = setInterval(function() {
var getmydate = {dialog.Object}.getValue('testfield1');
//var getmydate = "12/4/19 11:05";
var countDownDate = new Date(getmydate).getTime();

// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

document.getElementById("demo").innerHTML = "Estimated to be done in "+hours + " hours and " + minutes + " minutes";

// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "Overdue";
}
}, 1000);
</script>

If you have the {dialog.Object}.getValue('testfield1') outside of your interval function, then {dialog.Object} is not yet available... and it fails.
Also, the value for testfield1 may not be populated yet, so it may be empty... if outside the interval function.

If you don't want to use a script and Freeform Layout Container, then...

Create a Javascript function...

function getCountdown(){

	var getmydate = {dialog.Object}.getValue('testfield1');
	var countDownDate = new Date(getmydate).getTime();

	var x = setInterval(function() {
		//var getmydate = {dialog.Object}.getValue('testfield1');
		//var countDownDate = new Date(getmydate).getTime();
		// Get today's date and time
		var now = new Date().getTime();
		// Find the distance between now and the count down date
		var distance = countDownDate - now;
		// Time calculations for days, hours, minutes and seconds
		var days = Math.floor(distance / (1000 * 60 * 60 * 24));
		var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
		var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
		var seconds = Math.floor((distance % (1000 * 60)) / 1000);

		document.getElementById("demo").innerHTML = "Estimated to be done in "+hours + " hours and " + minutes + " minutes";

		// If the count down is over, write some text
		if (distance < 0) {
			clearInterval(x);
			document.getElementById("demo").innerHTML = "Overdue";
		}
	}, 1000);

}

Now it doesn't matter where your testfield1 getvalue() is... inside or outside the setInterval function.

In the UX Client-side event onRenderComplete, call your function...

getCountdown();

Finally, add a Static Text control to your UX with the HTML...

<p id="demo"></p>