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!

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

The Transformative Power of AI and ML in Enhancing Observability   In the realm of IT operations, the ...

.conf24 | Registration Open!

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

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...