Page 1 of 1
Dynamic URL in HTML object
Posted: Wed Sep 10, 2025 8:11 pm
by Paul
Desired outcome:
Depending on what the user enters into 'pk_AutoLyseDuration' field, change the URL in 'AutoLyse Timer URL' (pk_AL_TimerURL). 'AutoLyse Timer URL' needs to be a clickable URL.
AutoLyseTimer.PNG
Here is 'pk_AL_TimerURL' so far:
object: pk_AL_TimerURL
onchange event:
const AutoLyseMap = {
'.5': '
http://localhost/recipes/30-minute-timer/',
'1': '
http://localhost/recipes/timer/',
'2': '
http://localhost/recipes/2-hour-timer/',
'3': '
http://localhost/recipes/3-hour-timer/',
'4': '
http://localhost/recipes/4-hour-timer/',
'5': '
http://localhost/recipes/5-hour-timer/',
'6': '
http://localhost/recipes/6-hour-timer/',
'7': '
http://localhost/recipes/7-hour-timer/',
'8': '
http://localhost/recipes/8-hour-timer/',
};
const name = nuGetValue('pk_AutoLyseDuration'); //
nuSetValue('pk_AL_TimerURL', urlMap[name] || ''); //
What would I enter into the HTML area to accomplish the desired outcome?
Re: Dynamic URL in HTML object
Posted: Thu Sep 11, 2025 3:12 am
by steven
Hi Paul,
If you are familiar with JavaScript and/or jQuery,
you can use their functions to change different elements...
Code: Select all
const url = '<a href="' + $('#pk_AutoLyseDuration').val() +'">' + ' Click Me.</a>'';
$('#pk_AutoLyseDuration').html(url);
Steven
Re: Dynamic URL in HTML object
Posted: Thu Sep 11, 2025 4:06 am
by Paul
When I place your code into the HTML tab of pk_AL_TimerURL, I get this on the form:
ALTimerLink.PNG
The link in the status bar is:
http://localhost/nubuilder/'+%20$('#pk_ ... ).val()%20+'
Re: Dynamic URL in HTML object
Posted: Thu Sep 11, 2025 4:13 am
by steven
Paul,
That code goes on the on blur event of your element pk_AutoLyseDuration.
Not in the HTML.
Steven
Re: Dynamic URL in HTML object
Posted: Thu Sep 11, 2025 4:53 am
by Paul
Not sure if you understand my intended result. Re-read my original post?
Re: Dynamic URL in HTML object
Posted: Thu Sep 11, 2025 5:44 am
by kev1n
How about this? (Place it in the onblur or oninput event of pk_AutoLyseDuration)
Code: Select all
const AutoLyseMap = {
'.5': 'http://localhost/recipes/30-minute-timer/',
'1': 'http://localhost/recipes/timer/',
'2': 'http://localhost/recipes/2-hour-timer/',
'3': 'http://localhost/recipes/3-hour-timer/',
'4': 'http://localhost/recipes/4-hour-timer/',
'5': 'http://localhost/recipes/5-hour-timer/',
'6': 'http://localhost/recipes/6-hour-timer/',
'7': 'http://localhost/recipes/7-hour-timer/',
'8': 'http://localhost/recipes/8-hour-timer/',
};
const url = nuComposeURL(AutoLyseMap[this.value] || '', 'Click Me');
nuSetValue('pk_AL_TimerURL', url, 'html');
Re: Dynamic URL in HTML object
Posted: Thu Sep 11, 2025 6:25 am
by Paul
Putting that in the onInput event worked. Excellent! Thank you, Kevin!
Re: Dynamic URL in HTML object
Posted: Thu Sep 11, 2025 6:38 am
by Paul
It works, but the link dissappears when I save the record. I'd like to be able to save the html and then overwrite it (if there are changes) each time the record is saved.
Re: Dynamic URL in HTML object
Posted: Thu Sep 11, 2025 7:57 am
by kev1n
HTML elements are not stored in the database (they are display-only objects).
One option is to call
setTimerURL() both in the
pk_AutoLyseDuration change event and in the form’s Custom Code when the form is loaded.
Code: Select all
function setTimerURL() {
const AutoLyseMap = {
'.5': 'http://localhost/recipes/30-minute-timer/',
'1': 'http://localhost/recipes/timer/',
'2': 'http://localhost/recipes/2-hour-timer/',
'3': 'http://localhost/recipes/3-hour-timer/',
'4': 'http://localhost/recipes/4-hour-timer/',
'5': 'http://localhost/recipes/5-hour-timer/',
'6': 'http://localhost/recipes/6-hour-timer/',
'7': 'http://localhost/recipes/7-hour-timer/',
'8': 'http://localhost/recipes/8-hour-timer/',
};
const url = nuComposeURL(AutoLyseMap[nuGetValue('pk_AutoLyseDuration')] || '', 'Click Me');
nuSetValue('pk_AL_TimerURL', url, 'html');
}