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!

Routing logs with Splunk OTel Collector for Kubernetes

The Splunk Distribution of the OpenTelemetry (OTel) Collector is a product that provides a way to ingest ...

Welcome to the Splunk Community!

(view in My Videos) We're so glad you're here! The Splunk Community is place to connect, learn, give back, and ...

Tech Talk | Elevating Digital Service Excellence: The Synergy of Splunk RUM & APM

Elevating Digital Service Excellence: The Synergy of Real User Monitoring and Application Performance ...