Dynamic function name in JS
New Course Coming Soon:
Get Really Good at Git
I ran into a somewhat fun issue today.
On the courses page I started listing the courses I will organize soon, each with a form.
Forms are both protected using recaptcha, and the way recaptcha works is that it needs a function name to be called upon “return” (callback) of the validation process.
I basically used this same code for years but it’s probably the first time I run 2 forms on the same page.
Having 2 forms on the page means I cannot use the same function callback name.
However the form is in an Astro reusable component.
I thought about using a random name that’s generated any time a component is used.
To do so I had to create a random function name, using the global object.
It’s an old trick, just took me a couple minutes to figure out if this was the correct way to have a dynamic function name (this is by far the easiest I came across)
Instead of:
function onSubmit() {
//...
}
I used
globalThis['onSubmit' + rand] = function() {
//...
}
globalThis
pointing to the window object as I’m in the browser environment.
rand
is the random value, I generate it server-side when the component is created (through Astro), then pass it to the client-side script using define-vars
:
---
const rand = Math.random().toString(36).substr(2, 9)
---
<script is:inline define:vars={{ rand }}>
window['onSubmit' + rand] = function() {
document.getElementById('form-' + rand).submit()
}
</script>
If I didn’t have the server-side generated part, I’d have to wrap it manually in an IIFE to avoid name clashing any other time the component is added to the page.
And that’s exactly what happens under the hood in Astro:
Here is how can I help you:
- COURSES where I teach everything I know
- THE VALLEY OF CODE your web development manual
- BOOTCAMP 2024 cohort in progress, next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- SOLO LAB everything I know about running a lifestyle business as a solopreneur
- Interesting links collection
- Follow me on X