Dashboards & Visualizations

How to change the label for a Submit button in HTML?

cwilmoth
Path Finder

I have a form that contains a submit button and it has been converted to HTML so that I can change the label from "Search" to "Submit". However, this does not work. Here is the code that Splunk created for me when I chose to "Convert to HTML":

    <div class="input form-submit" id="search_btn">
        <button class="btn btn-primary submit">Search</button>
    </div>

I should just have to change the description, right? To this?:

    <div class="input form-submit" id="search_btn">
        <button class="btn btn-primary submit">Submit</button>
    </div>

It still shows "Search" as the label for the button on the form when using the second example. If I change or remove the id tag (id="submit_btn"), then the label changes to whatever I put right before the tag, but then the submit functionality does not work. Does anyone know what is going on here? Splunk version 6.0.2.

Thanks.

krschwar
Engager

If you changed to HTML you can add the text attribute to the button definition in the JS:
(as posted here: https://answers.splunk.com/answers/147151/change-the-submit-button-text-in-splunk-6-1-simple-xml-das...)

var submit = new SubmitButton({
id: 'submit',
el: $('#search_btn'),
text: 'Update'
}, {tokens: true}).render();

If you want to keep it as SimpleXML you can add the following to your page JS file (within the document ready function):

$('.submit').html('Update'); // during loading
$('.submit').bind("DOMSubtreeModified",function() { // when SplunkJS tries to change it
$('.submit').html('Update');
});

0 Karma

manur
Explorer

The problem with your second part is that, in Internet Explorer 11, the change of the label fires itself a DOMSubtreeModified event, which creates an infinite loop and freezes the browser.

Plus DOMSubtreeModified and similar events are deprecated.

Here's something that works better :

  var submitButton = $("#submit button");
  submitButton.text("Update");
  new MutationObserver(function() {
      this.disconnect();
      submitButton.text("Update");
      this.observe(submitButton[0], {childList: true});
  }).observe(submitButton[0], {childList: true});
0 Karma

hortonew
Builder

If you remove the id and the form uses what you put, then the text of the button is actually being changed via javascript/css. You might want to look at what css/js is applied by viewing the source of the displayed page, and looking through those files to see what gets applied to search_btn. Then, modify those files, or put your own inline html/css/js on the form to control the text after Splunk's default text is applied.

.conf21 CFS Extended through 5/20!

Don't miss your chance
to share your Splunk
wisdom in-person or
virtually at .conf21!

Call for Speakers has
been extended through
Thursday, 5/20!