Dashboards & Visualizations

how can i change type of inputText

sfatnass
Contributor

hi,

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

see an exemple here

thx

0 Karma
1 Solution

jconger
Splunk Employee
Splunk Employee

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.

alt text

View solution in original post

0 Karma

jconger
Splunk Employee
Splunk Employee

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.

alt text

0 Karma

mrccasi
Explorer

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

0 Karma

jconger
Splunk Employee
Splunk Employee

Here is a snippet that currently works:

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

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

mrccasi
Explorer

wow it worked 🙂 Thank you for the fast reply!

0 Karma

sfatnass
Contributor

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')
 });
0 Karma

jconger
Splunk Employee
Splunk Employee

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

0 Karma
Get Updates on the Splunk Community!

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

Splunk is officially part of Cisco

Revolutionizing how our customers build resilience across their entire digital footprint.   Splunk ...

Splunk APM & RUM | Planned Maintenance March 26 - March 28, 2024

There will be planned maintenance for Splunk APM and RUM between March 26, 2024 and March 28, 2024 as ...