Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-12-01T17:35:34.417Z
Answers.LastActivityDate: 2020-12-01T17:35:34.417Z
Answers.UserDisplayName: Seb Jones
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-11-30T16:38:12.157Z
Answers.LastActivityDate: 2020-11-30T16:38:12.157Z
Answers.UserDisplayName: Martin Spain
Body: <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>
  
Tags: <plugin-development><admin><javascript><settings>
Title: Plugin Settings Color Input Javascript Event Listeners
ThreadText: # 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.
  
  
  ---
  
  