How to implement JQuery in an HTML dashboard to add a "Clear" button to clear two input fields?

[pashernx]

Hi,

I have a simple XML dashboard and converted it to HTML. I have added a clear button to clear two input fields, but the clear option doesn't seem to work.

...
<div class="input input-text" id="input1">
            <label>First Name</label>
</div>
<div class="input input-text" id="input2">
            <label>Last Name</label>
</div>
...
...
...
<div class="form-submit" id="clrb">
            <button class="btn btn-default" id="clear_btn">Clear</button>
</div>
...
...
...
function clear_fields() {
            $('#input1').val('');
                    $('#input2').val('');
}
...
...
...
$('#clear_btn').on('click', function () {
            clear_fields())
...
...
...

Am I missing anything here? Is this possible with javascript?

Regards,

[LukeMurphey · Accepted solution]

You will need to call the SplunkJS component function. You can do this by using mvc.Components.getInstance() to get the SplunkJS instance and then you can call that version of val(). For example:

mvc.Components.getInstance('description-input').val('');

To find the ID of the input, look through the HTML for the input and see what the ID is. It should look something like this:

var input1 = new TextInput({
     "id": "description-input",
     "searchWhenChanged": false,
     "el": $('#description-input', this.$el)
}, {tokens: true}).render();

[pashernx]

I do have a part of the code for the inputs:

        var input1 = new TextInput({
            "id": "input1",
            "default": "\"\"",
            "searchWhenChanged": false,
            "value": "$form.userid$",
            "el": $('#input1')
        }, {tokens: true}).render();

        input1.on("change", function(newValue) {
            FormUtils.handleValueChange(input1);
        });


        var input2 = new TextInput({
            "id": "input2",
            "default": "\"\"",
            "searchWhenChanged": false,
            "value": "$form.racf$",
            "el": $('#input2')
        }, {tokens: true}).render();

        input2.on("change", function(newValue) {
            FormUtils.handleValueChange(input2);
        });

And I have referenced the same IDs in the clear_fields() function (as in the original post). I tired the below code as well:

$('input1').val('');
                     $('input2').val('');

Neither way it works.

[LukeMurphey]

You need to use a reference to the SplunkJS component, not a jQuery reference to the input element directly.

Try this:

mvc.Components.getInstance('input1').val('');
mvc.Components.getInstance('input2').val('');

[pashernx]

It worked. Thanks!!

[alacercogitatus]

That's not going to work, unless you have some code you aren't showing.

$('#element').val('');

Does not work. For anything. You need to drill down until you see the Javascript section with the instantiation of the Inputs. Note the variables they are called (might be input1 or element1). Then you reference them in the click function to clear the data.

Pastebin the Sourcecode (and put the link here) and we can review the code and make a better suggestion.