Dashboards & Visualizations
Highlighted

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

Builder

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

0 Karma
Highlighted

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

SplunkTrust
SplunkTrust

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

Highlighted

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

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.

Highlighted

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

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

Highlighted

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

Builder

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

0 Karma
Highlighted

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

Contributor

Cheers 🙂
Harsh

0 Karma