How do I add custom JavaScript to a form?
I am using the ColorPicker component and I want to change the SVG prefix icon color with JavaScript so it reflects whatever color has been chosen in real time. However I can't figure out how to get the JavaScript on to the page when it renders.
I've asked copilot and gone around the houses looking at getScripts and getFooterScripts in the edit page resource neither of which viewing the source appear to be doing anything.
Would really appreciate some advice, you'd be really helping me out.
5 Replies
I’m not understanding what you’re asking. Could you provide code examples? This sounds like a job for Livewire rather than reinventing the wheel if you’re just wanting to update a valve “live” but I think I’m missing what you’re asking.
I'm asking how do I add JavaScript to a form page.
In more detail though, what I have is a simple ColorPicker component, I've given that a prefix icon, this is an SVG so I can change the colour with CSS, but I can't do this without adding a listener to the input and then reacting to the colour chosen.
I think you need to register it as an asset
https://filamentphp.com/docs/3.x/support/assets
You can pass in some >>JS depending on the exact use.
If you make the field live you can set the color based off the value?
@Alex-Elivate I'll look at this, thanks