Splunk Search

Clear textbox value after submit

garryclarke
Path Finder

I have a dashboard where I want to use a textbox input to add data to a lookup file.

I have managed to get this to work using an outputlookup but want to clear the text box input after I have hit the submit button to prevent the same data being added again by the user.

Is there a way I can associate actions to the Submit button on a dashboard, ie clear a textbox or refresh a panel report on the dashboard?

Tags (2)

kbarker302
Communicator

This will require JavaScript, and below is some code I just tested out:

In your dashboard XML, add a script attribute to your form or dashboard tag:

<form script="yourjavascript.js">

and add an id attribute to your text field:

<input type="text" token="yourtoken" id="yourfieldid"></input>

Create yourjavascript.js in the following directory (create the subfolders if they don't already exist):

$SPLUNK_HOME\etc\apps\<yourapp>\appserver\static

and add the following code:

require([
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function(mvc) {

    $('button').on("click", function(e) {
        // find text field with id starting with yourfieldid
        $('[id^=yourfieldid]:text').val('')  
    });        

});

Restart Splunk for the new JavaScript file to be recognized. My example assumes that there is only one button on your dashboard.

ktwingstrom
Path Finder

@kbarker302 This is great, works perfectly. However I wondered if there is a javascript function that would listen for the "submit" action of the form rather than a button click. I have a dashboard with 3 text boxes and users can search by IP, Username, or DNS name. Nobody actually clicks the search button they type the term and click enter and it searches. Is there a way to instead of clearing the boxes on the click event clear them when the button is "clicked" via the enter key? Thanks

0 Karma

marianomromano
Engager

If your submit button id is "btn-submit", you can use the following code:

$('#btn-submit').on("click", function(e) {

0 Karma

ktwingstrom
Path Finder

Right but won't that only listen for an actual click? Or will it listen for any type of press of the button (like if a user hits enter instead?) Is the difference here that you are explicitly defining the ID of the button rather than the class?

0 Karma

marianomromano
Engager

It will listen to a button with an id of "btn-submit". So it is listening to the ID of the button and not all button clicks:

This is the button code:

        <div class="form-submit" id="btn-submit">
          <button class="btn btn-primary submit">Submit</button>
        </div>

And the JavaScript code would be:

$('#btn-submit').on("click", function(e) {
0 Karma

jossplacencia
New Member

any solution?

0 Karma
Did you miss .conf21 Virtual?

Good news! The event's keynotes and many of its breakout sessions are now available online, and still totally FREE!