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

[andrewtrobec]

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

[harshpatel · Accepted solution]

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]

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

[harshpatel]

Cheers 🙂
Harsh

[denzelchung]

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]

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