Open a url using custom code Topic is solved

[Paul]

Hi,

I am new to nubuilder.

I am trying to create an object that uses custom javascript code to open a url in the defined url field in my database.
I am confused about what to enter or select for the 'Run' field. I tried selecting the 'nurunjavascript' for that field, but it opened another form.
What am I missing here?
Help?

RUN.PNG

Here is the custom javascript code:

function openRecordURL() {
// Get the value of the URL field from the current record
var url = document.getElementById('pk_recipeURL').value;
// Check if the URL is not empty
if (url) {
// Open the URL in a new browser tab
window.open(url, '_blank');
}
}

[kev1n]

Hi Paul,

To open a URL (stored in a Text object) with a button click, follow these steps:

Add a new object of type Input (Tab "All").

In the "Input" tab, set Input Type to "Button".

Go to the "Custom Code" tab and add an onclick event with the following code:

window.open(nuGetValue('url_object_id'), "_blank");

Replace url_object_id with the ID of the Text object that contains the URL.

[Paul]

Kevin,

Thank you very much your your courteous and prompt reply!

I tried the steps you provided and it fails with a validation error "This ID is already used on this form." I have an input field that allows the input of a URL that uses 'pk_recipeURL' and I am calling that same field for the button action. How do I work around this?

ID_error.PNG

edit_form.PNG

[Paul]

Not being able to use an ID on a form more than once is quite frustrating. It should be changed.

[kev1n]

An ID must be unique, just add a postfix like _button to it. E.g. pk_recipeURL_open

Every HTML element should have a unique id because the id attribute is meant to uniquely identify a single element within the entire page, ensuring that CSS, JavaScript, and accessibility tools can reliably target and interact with it. If multiple elements share the same id, it breaks the uniqueness rule of the DOM, which can cause unexpected behavior—such as CSS styles being applied incorrectly, JavaScript functions selecting the wrong element, or screen readers struggling to reference elements for accessibility. Using unique ids improves maintainability, prevents conflicts, and ensures that your code behaves consistently across browsers and devices.

Well, if two elements dared to share the same sacred id, a function like nuGetValue('id_of_object') would suddenly face an existential crisis—it would obediently return the value of the first element it stumbles upon in the DOM, blissfully ignoring the fact that another impostor with the same id exists. The second element, despite its bold attempt at identity theft, would simply be invisible to the function, left standing in the shadows. In this imaginary world, your code would work sometimes, fail mysteriously at other times, and developers would spend hours hunting "bugs" that were really just two elements fighting over the same name tag.

[Paul]

I see. Thank you for the explanation. I have worked around the problem by simply duplicating the data into another db column and using that column for the next step.