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.
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.
Hi @jconger, this does not seem to work in splunk version 7.1.4. Any idea why? Thank you!
Here is a snippet that currently works:
require(["jquery", "splunkjs/mvc/simplexml/ready!"], function($) {
$("[id^=numbers_only]")
.find("input")
.attr('type','number')
});
wow it worked 🙂 Thank you for the fast reply!
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')
});
For this example, we do not need underscore or mvc.