<p>In the end the problem ended up being that I did not add the event listener to the input elements after the document was ready. The following code fires the <code>eventHandler</code> function correctly when any settings input field is changed, including colour inputs.</p>
<pre><code>$(document).ready(function () {
    $(&quot;form :input&quot;).change(eventHandler);
});
</code></pre>

CC BY-SA 4.0
2020-12-01T17:35:34.417Z
2020-12-01T17:35:34.417Z
Seb Jones
<p>If this is your plugin, you can register an <a href="https://craftcms.com/docs/3.x/extend/asset-bundles.html" rel="nofollow noreferrer">AssetBundle</a> with custom CSS and JS for your plugin. This will be loaded in your plugin settings page, and in your JS file you can then specify an event handler for your colour picker. You might need to add a specific class to the input in the settings template to ensure you can select it easily in your JS file.</p>
<p>If this is referring to a first/third-party plugin, you could use a plugin like <a href="https://plugins.craftcms.com/cp-js" rel="nofollow noreferrer">CP JS</a> to load a custom JS file into the CP and attach an event handler in that file to trigger your XHR.</p>

CC BY-SA 4.0
2020-11-30T16:38:12.157Z
2020-11-30T16:38:12.157Z
Martin Spain
<p>Is it possible to attach JavaScript event listeners to the colour input field in a plugin's settings page, so that when a user selects a colour with the picker I can run an AJAX request?</p>

<plugin-development><admin><javascript><settings>
Plugin Settings Color Input Javascript Event Listeners
# Plugin Settings Color Input Javascript Event Listeners

(Asked by: username_0 on 2020-11-28)

Is it possible to attach JavaScript event listeners to the colour input field in a plugin's settings page, so that when a user selects a colour with the picker I can run an AJAX request?

**Tags:** plugin-development, admin, javascript, settings

---

## 2 answers

### Answer by username_0 on 2020-12-01. Score: 1 | Accepted answer

In the end the problem ended up being that I did not add the event listener to the input elements after the document was ready. The following code fires the eventHandler function correctly when any settings input field is changed, including colour inputs.
$(document).ready(function () {
    $("form :input").change(eventHandler);
});


---

### Answer by username_1 on 2020-11-30. Score: 1

If this is your plugin, you can register an [AssetBundle](https://craftcms.com/docs/3.x/extend/asset-bundles.html) with custom CSS and JS for your plugin. This will be loaded in your plugin settings page, and in your JS file you can then specify an event handler for your colour picker. You might need to add a specific class to the input in the settings template to ensure you can select it easily in your JS file.

If this is referring to a first/third-party plugin, you could use a plugin like [CP JS](https://plugins.craftcms.com/cp-js) to load a custom JS file into the CP and attach an event handler in that file to trigger your XHR.


---

