topic How to change the label for a Submit button in HTML? in Dashboards & Visualizations

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

cwilmoth — Wed, 10 Sep 2014 19:46:37 GMT

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.

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

hortonew — Wed, 10 Sep 2014 20:06:32 GMT

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.

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

krschwar — Thu, 24 Mar 2016 00:41:30 GMT

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-dashboard.html)

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');
});

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

manur — Thu, 30 Aug 2018 22:13:55 GMT

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});