Archive
Highlighted

how can i change type of inputText

Contributor

hi,

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

see an exemple here

thx

0 Karma
Highlighted

Re: how can i change type of inputText

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 "setnumbers.js" in the form tag. This file should live in $SPLUNKHOME/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^=myfield] for the jQuery selector. This tells jQuery to look for elements that start with myfield. The reason for this is the final rendered field will have an id something like "myfield9999-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
Highlighted

Re: how can i change type of inputText

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
Highlighted

Re: how can i change type of inputText

Splunk Employee
Splunk Employee

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

0 Karma
Highlighted

Re: how can i change type of inputText

Explorer

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

0 Karma
Highlighted

Re: how can i change type of inputText

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

Re: how can i change type of inputText

Explorer

wow it worked 🙂 Thank you for the fast reply!

0 Karma