Use jQuery to change background color of Send button on the last page | XM Community
Skip to main content
Solved

Use jQuery to change background color of Send button on the last page

  • June 28, 2024
  • 2 replies
  • 175 views

Forum|alt.badge.img+3

Hi there,

I want to change the background color of the last Next button, which in this case has the title Send.

We already use a lot of css within our survey, and thus I need to add the extra !important after the css color change. This is what I come up with, but in one way or the other it just does not add the !important field.

How can I change the background color of the send button and make that the most important color.

My current code:

Qualtrics.SurveyEngine.addOnReady(function() {
var nb = jQuery("#NextButton");
nb.css({
"background-color": "rgb(3, 129, 65) !important"
});
});

 

Best answer by RickB

Hi @romanop 

if you mean the last button (i made it green) you can make it with this code:

Qualtrics.SurveyEngine.addOnReady(function() {

  var nextButtons = document.querySelectorAll(".NextButton");

  var sendButton = nextButtons[nextButtons.length - 1];

  if (sendButton) {

    sendButton.style.setProperty("background-color", "rgb(3, 129, 65)", "important");

  }

});

 

2 replies

RickB
Level 4 ●●●●
Forum|alt.badge.img+22
  • Level 4 ●●●●
  • 128 replies
  • Answer
  • July 3, 2024

Hi @romanop 

if you mean the last button (i made it green) you can make it with this code:

Qualtrics.SurveyEngine.addOnReady(function() {

  var nextButtons = document.querySelectorAll(".NextButton");

  var sendButton = nextButtons[nextButtons.length - 1];

  if (sendButton) {

    sendButton.style.setProperty("background-color", "rgb(3, 129, 65)", "important");

  }

});

 


Forum|alt.badge.img+3
  • Author
  • Level 2 ●●
  • 14 replies
  • July 8, 2024

Many thanks, that worked!