Changing the style of a custom next button using JS | XM Community
Skip to main content
Solved

Changing the style of a custom next button using JS

  • February 9, 2020
  • 5 replies
  • 516 views
GrayMatterThinking
Level 2 ●●
Forum|alt.badge.img+4
Hi - I have a constant sum question that with a (frankly stupid) required workaround I can get to validate against a variable total value. It requires the use of a custom next button. Functionally it all works fine but the custom button has very basic styling and it stands out against the aesthetics of the rest of the survey. If I add a style element into the button html then I can get the button to look closer to the survey template styling but it appears to introduce issues and the standard default Next button which should remain hidden becomes displayed again - so essentially I have two next buttons. Here's an example of custom button html that works fine: `var nextButtonHTML = '<input id="CustomNextButton" class="NextButton Button" title="→" type="button" name="NextButton" value="→" aria-label="Next" style="">'; jQuery('#Buttons').append(nextButtonHTML);` Here's an example that causes the unwanted behaviour described above: `var nextButtonHTML = '<input id="CustomNextButton" class="NextButton Button" title="→" type="button" name="NextButton" value="→" aria-label="Next" style="background-color:#106CA8; color:white">'; jQuery('#Buttons').append(nextButtonHTML);` Anybody know why I can't add a style element to my custom button without issue? Is there any way around this? Kind regards, Ben

Best answer by Tom_1842

Hi KatjaT , the "jQuery(newnext).css({ opacity: 0.5 });" piece makes it so that the cloned Next button becomes lighter when it is clicked on, similar to what happens when the original Next button is clicked. Is this what you meant by fading out? If so, removing that line of code will stop the color change when the cloned Next button is clicked.
To make the cloned Next button constantly visible next to the original button, you can remove the "jQuery(next).css({"visibility":"hidden"});" piece of the code. This will make it so that both the original and the cloned button appear next to each other, like in the below:
CloneNext.pngYou might also check out this post which touches on having the Next/Previous buttons included at the top of the screen.

Shashi

5 replies

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Tom_1842
  • Level 8 ●●●●●●●●
  • December 15, 2022

Hi there, if you still need, I adapted the code in this custom validation post which clones the next button, hides the original, adds styling with jQuery, and then advances the page when clicked on. Try pasting the below to the OnReady of the question's JavaScript.
const next = document.getElementById("NextButton");
const newnext = next.cloneNode(true);
newnext.id = "newnext";
jQuery(newnext).appendTo("#Buttons");
jQuery(next).css({"visibility":"hidden"});

jQuery(newnext).css({
    "border": "none",
    "color": "#fff",
    "font-size": "16px",
    "padding": "8px 20px",
    "-webkit-border-radius": "4px",
    "-moz-border-radius": "4px",
    "-ms-border-radius": "4px",
    "-o-border-radius": "4px",
    "border-radius": "4px",
    "cursor": "pointer",
    "margin": "0",
    "text-align": "center",
    "text-decoration": "none",
    "-webkit-appearance": "none",
    "transition": "background .3s",
    "background-color": "#007ac0"
});

var newnextclick = document.getElementById("newnext");
jQuery(newnextclick).on("click , touchstart", function() {
jQuery(newnext).css({ opacity: 0.5 });
jQuery(next).click()
});
For your original question though, you can get the ID of the custom button once its been created and style it with jQuery like above. The below does not hide the original next button, so that would need to be added in like the above:
var nextButtonHTML = '';
jQuery("#Buttons").append(nextButtonHTML);

var nextButtonStyle = document.getElementById("CustomNextButton");

jQuery(nextButtonStyle).css({
    "border": "none",
    "color": "#fff",
    "font-size": "16px",
    "padding": "8px 20px",
    "-webkit-border-radius": "4px",
    "-moz-border-radius": "4px",
    "-ms-border-radius": "4px",
    "-o-border-radius": "4px",
    "border-radius": "4px",
    "cursor": "pointer",
    "margin": "0",
    "text-align": "center",
    "text-decoration": "none",
    "-webkit-appearance": "none",
    "transition": "background .3s",
    "background-color": "#007ac0"
});

K
Level 2 ●●
Forum|alt.badge.img+5
  • KatjaT
  • Level 2 ●●
  • February 3, 2023

Hello, I have found this thread very helpful and was able to clone the next button. However, the cloned button keeps on fading out as soon as I get to the page where I've placed it. Where do I have to adjust the JS to make the button constantly visible next to the original button?

qualtrics_nerd
Level 5 ●●●●●
Forum|alt.badge.img+19
  • qualtrics_nerd
  • Level 5 ●●●●●
  • February 3, 2023

Hi KatjaT ,
Just remove the highlighted portion from your code.
image.pngHope this resolves your query😊!!

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Tom_1842
  • Level 8 ●●●●●●●●
  • Answer
  • February 3, 2023

Hi KatjaT , the "jQuery(newnext).css({ opacity: 0.5 });" piece makes it so that the cloned Next button becomes lighter when it is clicked on, similar to what happens when the original Next button is clicked. Is this what you meant by fading out? If so, removing that line of code will stop the color change when the cloned Next button is clicked.
To make the cloned Next button constantly visible next to the original button, you can remove the "jQuery(next).css({"visibility":"hidden"});" piece of the code. This will make it so that both the original and the cloned button appear next to each other, like in the below:
CloneNext.pngYou might also check out this post which touches on having the Next/Previous buttons included at the top of the screen.

K
Level 2 ●●
Forum|alt.badge.img+5
  • KatjaT
  • Level 2 ●●
  • February 4, 2023

Thank you so much to both of you again!

Terms & ConditionsAccessibility statement