Fake Next buttons in Javascript and End of Survey elements | XM Community
Question

Fake Next buttons in Javascript and End of Survey elements


Userlevel 7
Badge +30
  • Level 6 ●●●●●●
  • 1030 replies
I have a survey where I'm using Javascript for validation of numeric fields, to run a check that the sum of a series of columns is consistent with the value entered in an earlier field. It creates a fake Next button that appears until the last condition is False, at which point it clicks the real Next button to move to the next page. The survey has this type of Javascript on three different pages.

Everything works fine in the heart of the survey, but there's a problem when respondents reach the end. The Response Summary is enabled in the End of Survey element to appear before the respondent submits. When a respondent reaches this point of the survey, it shows THREE Next buttons (only one of which actually works).

I wanted to see if this could be caused by the Response Summary, or something else, so I removed the Response Summary option from the survey and filled it out;. Only one Next button appeared on the last page, suggesting an incompatibility between the Javascript I'm using and the Response Summary option.

Has anyone encountered this problem before, and know how to work around or resolve it? I contacted Support and they are looking into it to see if this is "expected functionality". In the meantime, they suggested I look for help here. Any suggestions?

17 replies

Userlevel 5
Badge +6
Hi,
what about hiding these button using their id or class on the last page?
`jQuery(".YourButtonClass").css("display", "none");`
Userlevel 7
Badge +27
@MatthewM - Post your code.
Userlevel 7
Badge +30
@fleb, The last page that the respondents are on is the Response Summary, and I don't know of any way to add Javascript to it.

@TomG The beginning and end of the code from all three pages is attached.

!
Userlevel 2
Badge +1

Hello MatthewM,
I was wondering if you received a response? I have some custom code that inserts previous and next buttons at the top of my pages, in addition to the built-in buttons at the bottom. That is working for me, but I also have a response summary that appears before people get to submit and I cannot figure out how to hide my custom buttons from the Response Summary page (because, as you mentioned, I can't figure out how to get add JavaScript to the Response Summary).
Thanks!

Userlevel 7
Badge +21

LouRisc You could just add a condition for appending the button, so that it doesn't show up on the response summary page.
Something like:
if (document.querySelector("#EndOfSurvey") == null) {
jQuery("#Buttons").append('')
}

Userlevel 2
Badge +1

ahmedA Thank you for your response. I tried adding the condition you listed above, but I couldn't get it to work. Instead of removing the NEXT button on the Response Summary page, it added an extra NEXT button on every page. This is the code that I added in order to get the extra PREVIOUS/NEXT buttons to appear in the header. Any thoughts on how to incorporate your idea within this?




Userlevel 7
Badge +21


https://www.qualtrics.com/community/discussion/comment/33149#Comment_33149
            id="PreviousButton"
        name="PreviousButton"
        title="PREVIOUS"
        type="submit"
        value="PREVIOUS"
    />
            id="NextButton"
        name="NextButton"
        title="NEXT"
        type="submit"
        value="NEXT"
    />






Just added an if condition to remove them, if it is the end of the survey.

Userlevel 2
Badge +1

https://www.qualtrics.com/community/discussion/comment/33151#Comment_33151Thank you, ahmedA! That works beautifully!
If you don't mind, I'd like to ask one more quick question. I suspect there is nothing that can be done about this, but on the two pages where I have hidden the buttons (in the Response Summary, as we discussed above, and on my first page), the buttons appear for a fraction of a second before disappearing again. It isn't a big deal, but do you know if there is any way of preventing that?
Cheers!

Userlevel 7
Badge +21

This code reverses the entire process and only inserts the code when it isn't the response page, perhaps this may help you.


Userlevel 2
Badge +1

Thanks again, ahmedA. I'm sticking with your solution from Jan 6 as that seems to be working best for me. Cheers!

Userlevel 2
Badge +1

https://www.qualtrics.com/community/discussion/comment/33151#Comment_33151ahmedA, I just noticed something and was wondering if you could give me a tip (and thank your for all your help again!). Thanks to the code you provided on Jan 6, I was able to add the additional buttons at the top of the page and hide them from the Response Summary page. Great! What I forgot to ask was how to also hide them from the custom end of survey messages that I am using. Perhaps I need to add an additional section mimicking what you did for the Response Summary? If so, however, what would the querySelector be for the custom end of survey message? You used #EndOfSurvey for the Response Summary, so I wonder what it is for the custom end of survey message. Thank you!

Userlevel 7
Badge +21

Even custom end of survey messages have the id EndOfSurvey, so they should automatically be deleted.

Userlevel 2
Badge +1

Oh! But we were using the EndOfSurvey id to eliminate the buttons from the Response Summary, which is different than the end of survey message. In my survey, respondents get to see the Response Summary page before actually clicking submit, at which point they are presented with my custom end of survey message (this gives them a chance to review their responses before submitting them and making corrections, if they need to). So, when I apply your code from Jan 6, the buttons are indeed removed from the Response Summary page (which is what I was hoping for), but then the buttons reappear on the custom end of survey message (and I would like to remove them from there, too).

Userlevel 7
Badge +21

In the HTML of whatever message you are showing them, add this somewhere

and change this line if
(document.querySelector("#EndOfSurvey") != null) 
to if
(document.querySelector("#EndOfSurvey") != null || document.querySelector("#some_end") != null)

Userlevel 2
Badge +1

Once again, you're a genius! That worked perfectly. Thanks so much for all your help, ahmedA!

Userlevel 7
Badge +21

😊

Userlevel 2
Badge +1

Hello ahmedA,
I'm not sure if you are still part of this support community, but if you are, I was wondering if you might be able to help me.
Just over one year ago, as you can see earlier in this discussion, you helped me figure out how to suppress some additional previous/next buttons that I had added to the top of my survey from the Response Summary page. This year's version of the same survey isn't using the Response Summary the same way. So, what I did this time is suppress those same buttons from the Table of Contents conclusion page. I was able to apply your suggestion from above into the HTML of my custom Table of Contents completion message to successfully suppress the buttons from this page.
But, what I cannot seem to figure out is how to change the label of the next button at the bottom of the Table of Contents conclusion page ONLY (not on other Table of Contents pages).
I am using the script below in the Table of Contents Header to change the label of the next button on all Table of Contents pages.

I was thinking I could add something like the code above to the HTML of the custom conclusion message to override it on the conclusion page, but it isn't working for me. I suspect what my problem is could be one of two things. 1) Maybe, since the code above applies to all Table of Contents pages, I can't then change it elsewhere. Or, 2) I need to specifically refer to the Table of Contents CONCLUSION page, rather than 'TOCPage', but I don't know how to do that.
Can you or anyone else help?
Thank you very much!

Leave a Reply