Solved: Is it possible to access values within HTML form o...

andrewtrobec · ‎09-17-2018

Hello,

I'm the process of designing a simple data entry form using Splunk, but I am worred that too many inputs (50+) will make the interface slow and unusable. As an alternative, I'm trying to use a simple HTML form and then extract the values when a checkbox value is selected. As a simple example, I have an HTML form that has two inputs: firstname and lastname

<row>
    <panel>
        <title>HTML Form</title>
        <html>
            <div>
                <form>
                    First name: &lt;br/&gt;
                    <input type="text" name="firstname"/>&lt;br/&gt;
                    Last name:&lt;br/&gt;
                    <input type="text" name="lastname"/>
                </form>
            </div>
        </html>
    </panel>
</row>

What I'd like to do is generate a result set based on those values by selecting a checkbox. I want to concatenate the values from all of the form fields and then assign it to a single input. Something along the lines of this:

<row>
    <panel>
        <input type="checkbox" token="tok_submit_values">
            <choice value="Submitted">Submit</choice>
            <change>
                <condition match="$tok_submit_values$"="Submitted">
                    <set token="tok_input_concatenation">form.firstname + form.lastname</set>
                </condition>
                <condition>
                    <unset token="tok_input_concatenation"></unset>
                </condition>
            </change>
        </input>
    </panel>
</row>

Once the value has been concatenated, I can use the makeresults command to format the data before writing it to index.

Is this possible? Any pointers would be greatly appreciated!

Best regards,

Andrew

kamlesh_vaghela · ‎09-17-2018

@andrewtrobec

HTML inputs and Splunk Dashboard Inputs are so different. You can not access HTML inputs by form.firstname. But you can access it using javascript and set Splunk tokens.

Steps:
1) Create a javascript file.
2) Create a function which can set/unset tok_input_concatenation token as per your requirements.
3) Call created function on click of submit button. For assigning onclick on submit I suggest jquery.

Below are some references for:

http://dev.splunk.com/view/webframework-codeexamples/SP-CAAAE4M
http://dev.splunk.com/view/webframework-developapps/SP-CAAAEW3

View solution in original post

niketn · ‎09-17-2018

@andrewtrobec you can use @jconger ' s blog for binding jQuery with HTML input. https://www.splunk.com/blog/2016/09/21/using-html5-input-types-on-splunk-forms.html

You can also refer to the following answer on similar lines where HTML date input is used with jQuery: https://answers.splunk.com/answers/627432/jquery-datepicker-in-splunk.html

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

kamlesh_vaghela · ‎09-17-2018

@andrewtrobec

HTML inputs and Splunk Dashboard Inputs are so different. You can not access HTML inputs by form.firstname. But you can access it using javascript and set Splunk tokens.

Steps:
1) Create a javascript file.
2) Create a function which can set/unset tok_input_concatenation token as per your requirements.
3) Call created function on click of submit button. For assigning onclick on submit I suggest jquery.

Below are some references for:

http://dev.splunk.com/view/webframework-codeexamples/SP-CAAAE4M
http://dev.splunk.com/view/webframework-developapps/SP-CAAAEW3

andrewtrobec · ‎09-17-2018

I've managed to lay the groundwork, but I cannot access the two form inputs: firstname and lastname. Here's what my script looks like:

require([
        'jquery',
        'splunkjs/mvc',
        'splunkjs/mvc/simplexml/ready!'
], function ($, mvc) {
        var tokens = mvc.Components.get("default");
        $('#buttonSummary').on("click", function (e){
                tokens.set("tok_concatenated_inputs", firstname + lastname);
        });
});

I'm still not sure how to access the two form fields as they are not regular tokens.

kamlesh_vaghela · ‎09-17-2018

Try this.

require([
         'jquery',
         'splunkjs/mvc',
         'splunkjs/mvc/simplexml/ready!'
 ], function ($, mvc) {
         var tokens = mvc.Components.get("default");
         $('#buttonSummary').on("click", function (e){
                var firstname = $("input[name=firstname]").val();
                var lastname = $("input[name=lastname]").val();
                 tokens.set("tok_concatenated_inputs", firstname + lastname);
         });
 });

swithinb · ‎12-18-2019

Hi @kamlesh_vaghela
I have an issue while building my custom app in splunk.

I have created a dashboard with a html having 2 form fields, name and id,
so on submit, How could i get these values and update a json file on backend in app/bin folder.

Do i need to specify an action tag in html or even if we use jquery how to get these values in python script which need to be executed on form submit.

Thanks in advance.

kamlesh_vaghela · ‎12-18-2019

@swithinb

You can create Custom endpoint for that. Pass you HTML elements values using javascript and which executes your code in bin folder.
Refer below link.

Custom Endpoints: Part 1 - Overview: https://vimeo.com/194918433

This video provides an overview of what we will be building in Splunk to set up custom endpoints.

And check Part 1 - 7 for more details.

swithinb · ‎12-30-2019

Thanks a lot @kamlesh_vaghela, this helped me sort out my issue.

kamlesh_vaghela · ‎12-31-2019

Glad to help you @swithinb

Happy Splunking

andrewtrobec · ‎09-17-2018

Amazing! Thank you for the guidance.

Is it possible to access values within HTML form objects rather than inputs?

Announcing Scheduled Export GA for Dashboard Studio

Extending Observability Content to Splunk Cloud

More Control Over Your Monitoring Costs with Archived Metrics GA in US-AWS!