Javascript question. I want to trigger the onclick handler of an element, without the normal effects of that click, for instance toggling a checkbox. I want its onclick to run, while the checkbox stays in the state it was in. I tried this:

document.getElementById('incidentsourceid_12').dispatchEvent(new Event('click'));

But that doesn't run the handler (or toggle the checkbox, which is fine). This does work, but eval is more or less against my religion:

eval(document.getElementById('incidentsourceid_12').getAttribute('onclick'));

Related, is there a general js Slack channel?

I'm sure there are separate JavaScript orientated Slacks, but there is a dedicated JavaScript channel here too, FYI

what if you just add click handler to a paragraph or span or div? so you don't have to worry about the events triggered from a checkbox or <a>

Thanks for jumping in Daniel and Adam. Let me pan back a bit to the actual thing I'm trying to solve. This form has a lot of dynamically shown and hidden elements -- choose Other, the Other field shows, that sort of thing. All that works as expected when you check or uncheck a checkbox, change a select or radio, etc, because there are onclick="showHideStuff()" attributes in the code. The issue is how to set the UI state correctly when the page is first displayed. The radios/checkboxes/selects get set by cf as per usual, but I'm trying to NOT duplicate the specific show-hide logic to apply display:none or block in cf. Make sense? I feel like this is problem that should have a known solution.

If

showHideStuff

is what works as a click event handler to do the needful, why don't you just call

showHideStuff

?

W e l l . . .

showHideStuff()

is really more like this:

"multi_ifothershowhide('transportedid', 1, 'transportedbyid,transportdestinationid');multi_ifothershowhide('transportedid', 2, 'transportedwhynotid');"

The closest I've come so far to running that without repeating it, and doing the same for all the other similar fields on the page, is the eval(getAttribute('onclick')) version. The code knows which fields I'm concerned with, so I just wrote a function to get the onclick and run it, I just don't love it. How are you folks handling this sort of thing?

I too have a legacy app with CF logic wrapped around form elements and yes I do have similar logic on the JS side and CF side which is needed when you want to use the same html form views for the create and update forms. How do I do new forms? well, the reactive forms way in Angular 🙂 Here is an idea, but would take some refactoring. Have a method that sets the state and values for all elements in the form. this method accepts a configuration object. Now you just need to build the configuration object the CF way. Then on server render you'd have something like

<cfoutput><script>setInitialState(#serializeJson(FormConfiguration)#);</script>

the javascript method

setInitialState()

takes that object and calls all your inner show/hide methods.

Try this:

myForm.myInputElement.onclick()

, replacing

myForm

with the value of the

name

attribute of your form element, and

myInputElement

with the value of the name attribute of the input element whose onclick functions you want to run.

@Daniel Mejia I hear you about generating the whole form in js, but not today. @David Buck well plork me, someElement.onclick() or onchange() seems to work fine. So I ended up so far with this:

if (changingField.tagName === 'SELECT')
	changingField.onchange();
else
	changingField.onclick();

Just goes to show, asking dumb questions helps!

Dumb questions are the only kind I'm qualified to answer 😉 . There is one caveat with this approach: if the elements have any event handlers that were added the "proper" way, via

element.addEventListener()

, those event handlers won't execute.

understood, but not an issue 🙂