Dashboards & Visualizations

JS submit button that accepts enter key?

nick405060
Motivator

Hi.

In my never-ending quest to create a working submit button (no, Splunk does still not offer a working submit button. Yes it is 2019. Yes Splunk is a billion-dollar SIEM) I would like to have my JS button submit on enter.

How?

0 Karma
1 Solution

niketn
Legend

@nick405060 this should be a straight-forward jQuery implementation nothing related specific to Splunk.

If your intent is to create your own HTML submit button which allows you to submit on click on Enter. You can try the following code

    $( "#myHtmlSubmit").keypress(function() {
            console.log( "Handler for myHtmlSubmit.keypress() called." );
        alert("Clicked through Enter");
    });

PS: The above JS applies for HTML panel created using Simple XML with input of type button and id="myHtmlSubmit". Following is the Simple XML code snippet for reference:

  <row>
    <panel>
      <html>
        <input id="myHtmlSubmit" type="button" class="btn btn-submit" value="Submit"></input>
      </html>
    </panel>
  </row>

Following is the output when the focus is set to the Submit button using keyboard tab key and Enter key is hit.

alt text

PS: If you want enter to be more generic to the entire dashboard, you would need to try $(document) instead of $("#myHTMLSubmit"). This will trap Enter key anywhere in the dashboard after the dashboard document (DOM) gets loaded (ready).

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketn
Legend

@nick405060 this should be a straight-forward jQuery implementation nothing related specific to Splunk.

If your intent is to create your own HTML submit button which allows you to submit on click on Enter. You can try the following code

    $( "#myHtmlSubmit").keypress(function() {
            console.log( "Handler for myHtmlSubmit.keypress() called." );
        alert("Clicked through Enter");
    });

PS: The above JS applies for HTML panel created using Simple XML with input of type button and id="myHtmlSubmit". Following is the Simple XML code snippet for reference:

  <row>
    <panel>
      <html>
        <input id="myHtmlSubmit" type="button" class="btn btn-submit" value="Submit"></input>
      </html>
    </panel>
  </row>

Following is the output when the focus is set to the Submit button using keyboard tab key and Enter key is hit.

alt text

PS: If you want enter to be more generic to the entire dashboard, you would need to try $(document) instead of $("#myHTMLSubmit"). This will trap Enter key anywhere in the dashboard after the dashboard document (DOM) gets loaded (ready).

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

nick405060
Motivator

Almost! I had to modify it so it takes the enter key only. After that modification, it still didn't work if you were focused on the form for the token you wanted to submit. If it was that case, the first press flickered the dashboard without actually updating results, while the second press actually submitted.

I managed to fix this with keyup. This was my solution:

 require([
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/simplexml/ready!'
 ], function($,mvc){
     var submittedTokens = mvc.Components.get("submitted");
     $("#submit_button").click(function(){
         submittedTokens.set("submit_trigger", ""+Math.random());
         submittedTokens.set("networkid",submittedTokens.get("networkid_onChange"));
     });
     $(document).on('keyup', function(e){
         if (e.which === 13 || event.keyCode === 13 || event.key === "Enter") {
             submittedTokens.set("networkid",submittedTokens.get("networkid_onChange"));
             submittedTokens.set("submit_trigger", ""+Math.random());
         }
     });
});
0 Karma

nick405060
Motivator

This js button can be used multiple times in the same dashboard, it can be inlined in panels, it doesn't break searchWhenChanged, and it submits on enter. Unlike other Splunk-developed buttons.

0 Karma
Get Updates on the Splunk Community!

Changes to Splunk Instructor-Led Training Completion Criteria

We’re excited to share an update to our instructor-led training program that enhances the learning experience ...

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

❄️ Welcome the new year with our January lineup of Community Office Hours, Tech Talks, and Webinars! &#x1f389; ...

Preparing your Splunk Environment for OpenSSL3

The Splunk platform will transition to OpenSSL version 3 in a future release. Actions are required to prepare ...