Dashboards & Visualizations

How to I monitor a dropdown input for changes using Javascript?

andrewtrobec
Motivator

Hello,

I am trying to monitor a dropdown input for changes using Javascript, but I don't know where to assign an id and what event should trigger an action. I am trying to following:

Input on the dashboard:

<input type="dropdown" token="tok_input" id="input">
 <label>Input</label>
 <choice value="value_1">Value 1</choice>
 <choice value="value_2">Value 2</choice>
 <choice value="value_3">Value 3</choice>
</input>

Javascript

$('#input .button').on("change", function(e) {
 console.log("Input value has changed!");
});

The reason for the above is due to the id input being assigned to a div rather than to any type of html form element. I also noticed that the dropdown is a collection of buttons, so I'm trying to pick up any button interactions within the div. So far I haven't managed to get anything working.

Am I assigning the id in the wrong place? Is there maybe some way to monitor the token name instead of assigning an id?

Any suggestions are more than welcome!

Thank you and best regards,

Andrew

1 Solution

harshpatel
Contributor

Hi @andrewtrobec,

You can listen on the token change event to know if dropdown value changed.
To listen the change:

require([
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function (mvc) {
    // get default token model
    var tokens = mvc.Components.getInstance("default");
    tokens.on("change:tok_input", function(model, value) {
        console.log("Dropdown value changed: " + String(value));
    });
});

Reference: http://dev.splunk.com/view/webframework-developapps/SP-CAAAEW4

View solution in original post

harshpatel
Contributor

Hi @andrewtrobec,

You can listen on the token change event to know if dropdown value changed.
To listen the change:

require([
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function (mvc) {
    // get default token model
    var tokens = mvc.Components.getInstance("default");
    tokens.on("change:tok_input", function(model, value) {
        console.log("Dropdown value changed: " + String(value));
    });
});

Reference: http://dev.splunk.com/view/webframework-developapps/SP-CAAAEW4

andrewtrobec
Motivator

This is exactly what I was looking for! Thank you so much!

0 Karma

harshpatel
Contributor

Cheers 🙂
Harsh

0 Karma

denzelchung
Path Finder

One way is to use @DavidHourani's method, which is to use a token.

If you want to do it using JavaScript, do it this way https://stackoverflow.com/questions/2402707/how-to-get-all-child-inputs-of-a-div-element-jquery

 $('#input :input.button').on("change", function(e) {
  console.log("Input value has changed!");
 });

This will get all input elements in the #input div, which is what you want to retrieve.

DavidHourani
Super Champion

Hi @andrewtrobec,

This seems like what you're looking for :
https://answers.splunk.com/answers/558642/access-a-drop-down-field-value-in-javascript.html
It includes an example of using the token in the dropdown in an HTML panel.

Let me know if it helps.

Cheers,
David

Get Updates on the Splunk Community!

Optimize Cloud Monitoring

  TECH TALKS Optimize Cloud Monitoring Tuesday, August 13, 2024  |  11:00AM–12:00PM PST   Register to ...

What's New in Splunk Cloud Platform 9.2.2403?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.2.2403! Analysts can ...

Stay Connected: Your Guide to July and August Tech Talks, Office Hours, and Webinars!

Dive into our sizzling summer lineup for July and August Community Office Hours and Tech Talks. Scroll down to ...