Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Dashboards & Visualizations
×
Join the Conversation
Without signing in, you're just watching from the sidelines. Sign in or Register to connect, share, and be part of the Splunk Community.
- Find Answers
- :
- Using Splunk
- :
- Dashboards & Visualizations
- :
- Why my button submit does not work ?
Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark Topic
- Subscribe to Topic
- Mute Topic
- Printer Friendly Page
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Why my button submit does not work ?
mah
Builder
12-27-2020
03:00 AM
Hi,
I was trying to create a submit button in a panel based on that link :
https://community.splunk.com/t5/Dashboards-Visualizations/Comprehensive-implementation-of-a-WORKING-submit-button/m-p/404125
BUT it is not working at all...
Here is my xlm code :
<form script="submit_button.js">
<label>Button in panel</label>
<row depends="$alwaysHideHTMLStyle$">
<panel>
<html>
<style>
<!-- button style -->
#submit_button{
width:80px !important;
}
#submit_button div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]{
width:80px !important;
}
#submit_button button{
padding: 6px 15px !important;
border-radius: 3px !important;
font-weight: 500 !important;
background-color: #5cc05c !important;
border: transparent !important;
color: #fff !important;
}
#submit_button button:hover{
background-color: #40a540 !important;
border-color: transparent !important;
}
</style>
</html>
</panel>
</row>
<row depends="$tokTextFilter$">
<panel id="test">
<title>Create Maintenance Windows</title>
<label>Button in panel</label>
<row depends="$alwaysHideHTMLStyle$">
<panel>
<html>
<style>
<!-- button style -->
#submit_button{
width:80px !important;
}
#submit_button div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]{
width:80px !important;
}
#submit_button button{
padding: 6px 15px !important;
border-radius: 3px !important;
font-weight: 500 !important;
background-color: #5cc05c !important;
border: transparent !important;
color: #fff !important;
}
#submit_button button:hover{
background-color: #40a540 !important;
border-color: transparent !important;
}
</style>
</html>
</panel>
</row>
<row depends="$tokTextFilter$">
<panel id="test">
<title>Create Maintenance Windows</title>
<!-- input app -->
<input type="dropdown" token="application_tok" searchWhenChanged="true">
<label>Application</label>
<fieldForLabel>app</fieldForLabel>
<fieldForValue>app</fieldForValue>
<search>
<query>index=A sourcetype="B"
| table tags{}.key
| rex field=tags{}.key "\[env\]\:(?<env>\S+)|\[app\]\:(?<app>\S+)"
| search app!=""
| fields app
| dedup app
| sort app</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<change>
<condition match="isnotnull($value$) AND $value$!=""">
<set token="tokTextFilter">$value$</set>
</condition>
</change>
</input>
<input type="dropdown" token="application_tok" searchWhenChanged="true">
<label>Application</label>
<fieldForLabel>app</fieldForLabel>
<fieldForValue>app</fieldForValue>
<search>
<query>index=A sourcetype="B"
| table tags{}.key
| rex field=tags{}.key "\[env\]\:(?<env>\S+)|\[app\]\:(?<app>\S+)"
| search app!=""
| fields app
| dedup app
| sort app</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<change>
<condition match="isnotnull($value$) AND $value$!=""">
<set token="tokTextFilter">$value$</set>
</condition>
</change>
</input>
<!-- input env-->
<input type="dropdown" token="environment_tok" searchWhenChanged="true">
<label>Environment</label>
<fieldForLabel>env</fieldForLabel>
<fieldForValue>env</fieldForValue>
<search>
<query>index=A sourcetype="B"
| table tags{}.key
| rex field=tags{}.key "\[env\]\:(?<env>\S+)|\[app\]\:(?<app>\S+)"
| search app=$application_tok$
| fields env
| dedup env
| sort env</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<change>
<condition match="isnotnull($value$) AND $value$!=""">
<set token="tokTextFilter">$value$</set>
</condition>
</change>
</input>
<input type="dropdown" token="environment_tok" searchWhenChanged="true">
<label>Environment</label>
<fieldForLabel>env</fieldForLabel>
<fieldForValue>env</fieldForValue>
<search>
<query>index=A sourcetype="B"
| table tags{}.key
| rex field=tags{}.key "\[env\]\:(?<env>\S+)|\[app\]\:(?<app>\S+)"
| search app=$application_tok$
| fields env
| dedup env
| sort env</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<change>
<condition match="isnotnull($value$) AND $value$!=""">
<set token="tokTextFilter">$value$</set>
</condition>
</change>
</input>
<!-- input text 1-->
<input type="text" token="start" searchWhenChanged="false">
<label>Start Time (yyyy-mm-dd HH:MM)</label>
<change>
<condition match="isnotnull($value$) AND $value$!=""">
<set token="tokTextFilter">$value$</set>
</condition>
</change>
</input>
<input type="text" token="start" searchWhenChanged="false">
<label>Start Time (yyyy-mm-dd HH:MM)</label>
<change>
<condition match="isnotnull($value$) AND $value$!=""">
<set token="tokTextFilter">$value$</set>
</condition>
</change>
</input>
<!-- input text 2-->
<input type="text" token="end" searchWhenChanged="false">
<label>End Time (yyyy-mm-dd HH:MM)</label>
<change>
<condition match="isnotnull($value$) AND $value$!=""">
<set token="tokTextFilter">$value$</set>
</condition>
</change>
</input>
<input type="text" token="end" searchWhenChanged="false">
<label>End Time (yyyy-mm-dd HH:MM)</label>
<change>
<condition match="isnotnull($value$) AND $value$!=""">
<set token="tokTextFilter">$value$</set>
</condition>
</change>
</input>
<!-- input button -->
<input type="link" id="submit_button">
<label></label>
<choice value="submit">Submit</choice>
</input>
<table>
<input type="link" id="submit_button">
<label></label>
<choice value="submit">Submit</choice>
</input>
<table>
<search>
<!-- my search with both js token -->
<query>| inputlookup my_lookup.csv
| head 5 | append [| makeresults
| eval Application="$application_tok$", Environment="$environment_tok$", Start="$start_id$", End="$end_id$"]
| fields - _time
| table Application Environment Start End
| outputlookup append=true my_lookup.csv
| sort Start</query>
<earliest>0</earliest>
<latest></latest>
<sampleRatio>1</sampleRatio>
<done>
<unset token="form.start"></unset>
<unset token="form.end"></unset>
<unset token="form.application_tok"></unset>
<unset token="form.environment_tok"></unset>
</done>
</search>
<option name="count">100</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
</row>
</form>
<query>| inputlookup my_lookup.csv
| head 5 | append [| makeresults
| eval Application="$application_tok$", Environment="$environment_tok$", Start="$start_id$", End="$end_id$"]
| fields - _time
| table Application Environment Start End
| outputlookup append=true my_lookup.csv
| sort Start</query>
<earliest>0</earliest>
<latest></latest>
<sampleRatio>1</sampleRatio>
<done>
<unset token="form.start"></unset>
<unset token="form.end"></unset>
<unset token="form.application_tok"></unset>
<unset token="form.environment_tok"></unset>
</done>
</search>
<option name="count">100</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
</row>
</form>
Here is my js code :
require([
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/simplexml/ready!'
], function($,mvc){
var submittedTokens = mvc.Components.get("submitted");
$("#submit_button").click(function(){
submittedTokens.set("start_id",submittedTokens.get("start"));
submittedTokens.set("end_id",submittedTokens.get("end"));
});
});
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/simplexml/ready!'
], function($,mvc){
var submittedTokens = mvc.Components.get("submitted");
$("#submit_button").click(function(){
submittedTokens.set("start_id",submittedTokens.get("start"));
submittedTokens.set("end_id",submittedTokens.get("end"));
});
});
Can you help me to see what is wrong ?
Thanks a lot.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
s2_splunk
Splunk Employee
12-28-2020
01:12 PM
Does it matter that your case does not match for the token names? Start vs start, End vs end in JS?
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
mah
Builder
12-29-2020
02:09 AM
That is not what I understand in the explanation in this link :
require([
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/simplexml/ready!'
], function($,mvc){
var submittedTokens = mvc.Components.get("submitted");
$("#submit_button").click(function(){
submittedTokens.set("start_id",submittedTokens.get("start"));
submittedTokens.set("end_id",submittedTokens.get("end"));
});
});
In yellow, it is token I apply in my search.
In green, it is token I apply in my text input.
That is what I understand in the demonstration in the link below...
But It actually does not wok at all...
Got questions? Get answers!
Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!
Meet up IRL or virtually!
Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.
Get Updates on the Splunk Community!
Observability Simplified: Combining User Experience, Application Performance & ...
Tech Talk
Observability Simplified: Combining User Experience, Application Performance & Network ...
Event Series May & June: From Network Visibility to Service Intelligence
Unifying the Network: Moving from Alert Noise to Service Intelligence with Splunk ITSI
In today’s hybrid ...
Global Splunk User Group Events: May + June 2026
Your Splunk Community Awaits: Discover Upcoming User Group Events Worldwide
Staying ahead in the fast-paced ...
