Dashboards & Visualizations

how to create a textbox with numeric value

vivek_manoj
Explorer

I have created a textbox input type in a dashboard.

I want to limit that user can enter only numeric value in a textbox.

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@vivek_manoj

I suggest you to go with HTML tag. Check below XML.

<dashboard>
  <label>TextBox</label>
  <row>
    <panel>
      <html>
        <input type="number" />
      </html>
    </panel>
  </row>
</dashboard>
0 Karma

vivek_manoj
Explorer

Hi Kamlesh,

Thanks for replying but in that case, how can we pass the value from the box to the panel.

As the box is inside html tag.

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

You have to set textbox value into token value, using javascript, which you can use in table.

You have to trigger set/get token on change/lost focus of the textbox. check below link for javascript reference. Still you need any assistance then let us know.

https://dev.splunk.com/enterprise/docs/developapps/webframework/binddatausingtokens/getandsettokenva...

https://www.youtube.com/watch?v=lojUc9v37Jg

https://answers.splunk.com/answers/586958/how-do-i-add-javascript-to-a-splunk-dashboard.html

0 Karma

vnravikumar
Champion

Hi

Check this

<form>
  <label>textbox</label>
     <fieldset submitButton="false">
     <input type="text" token="number">
       <label>Add threshold</label>
       <change>
         <condition match="match(value, &quot;^[0-9]+$&quot;)">>
           <set token="form.number">$value$</set>
         </condition>
         <condition>
           <unset token="form.number"></unset>
         </condition>
       </change>
     </input>
   </fieldset>
</form>
0 Karma

vivek_manoj
Explorer

Hi Ravi,

I have tried your above code, but I was looking that it wouldn't allow to enter the non-numberic data at all in the text box.

I can see its allowing to enter non-numberic data as well as not to pass the value in the url.

0 Karma

vnravikumar
Champion

Hi

Try the below code:

<form script="test.js">
  <label>textbox</label>
     <fieldset submitButton="false">
     <input type="text" token="number" id="digits">
       <label>Add threshold</label>
     </input>
   </fieldset>
</form>

Javascript: test.js

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

    $("#digits [data-test='textbox']").keyup(function () { 
        this.value = this.value.replace(/[^0-9\.]/g,'');
    });
});
0 Karma

vnravikumar
Champion

I hope the above code matches your requirement.

0 Karma

vnravikumar
Champion

Please confirm.

0 Karma
Get Updates on the Splunk Community!

Splunk Observability Cloud's AI Assistant in Action Series: Auditing Compliance and ...

This is the third post in the Splunk Observability Cloud’s AI Assistant in Action series that digs into how to ...

Splunk Community Badges!

  Hey everyone! Ready to earn some serious bragging rights in the community? Along with our existing badges ...

What You Read The Most: Splunk Lantern’s Most Popular Articles!

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...