topic Re: how can i change type of inputText in Dashboards & Visualizations

how can i change type of inputText

sfatnass — Wed, 24 Aug 2016 15:06:20 GMT

hi,

i try to change the type of an inputtext : from text to number

see an exemple here

thx

Re: how can i change type of inputText

jconger — Tue, 29 Sep 2020 10:43:45 GMT

There are 2 ways you can do this:

1 - convert your form to HTML and set the input type to number.
2 - keeping the form as SimpleXML, you can change the input type to number with jQuery. Here's how:

Set the id of your input field (this will actually just be a prefix to the rendered HTML, but we can take care of that in the Javascript).
Also, notice that I set a reference to a Javascript file named "set_numbers.js" in the form tag. This file should live in $SPLUNK_HOME/etc/apps/YOUR APP/appserver/static

<form script="set_numbers.js">
  <label>TestNumber</label>
  <fieldset submitButton="false">
    <input type="text" token="field1" id="my_field"></input>
  </fieldset>
</form>

Next, we use some jQuery to change the type of the input to number. This is done in the set_numbers.js file like so:

require(["jquery", "splunkjs/mvc/simplexml/ready!"], function($) {
    $("[id^=my_field]").attr('type','number')
});

Notice that I used [id^=my_field] for the jQuery selector. This tells jQuery to look for elements that start with my_field. The reason for this is the final rendered field will have an id something like "my_field_9999-input". This way, we can look for a certain prefix in case you want multiple fields to be numeric.

Here is a screenshot to show the result.

Re: how can i change type of inputText

sfatnass — Thu, 25 Aug 2016 08:30:26 GMT

it work well thx but
what about underscore and mvc ?

 require(["underscore", "jquery", "splunkjs/mvc", "splunkjs/mvc/simplexml/ready!"], function(_, $, mvc) {
     $("[id^=my_field]").attr('type','number')
 });

Re: how can i change type of inputText

jconger — Thu, 25 Aug 2016 14:55:40 GMT

For this example, we do not need underscore or mvc.

Re: how can i change type of inputText

mrccasi — Tue, 18 Jun 2019 02:28:52 GMT

Hi @jconger, this does not seem to work in splunk version 7.1.4. Any idea why? Thank you!

Re: how can i change type of inputText

jconger — Tue, 18 Jun 2019 02:58:53 GMT

Here is a snippet that currently works:

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

    $("[id^=numbers_only]")
        .find("input")
        .attr('type','number')
});

Re: how can i change type of inputText

mrccasi — Tue, 18 Jun 2019 03:05:18 GMT

wow it worked 🙂 Thank you for the fast reply!