URGENT HELP NEEDED IN LIVES SURVEY - Javascript not working

Hi,

Your code is correct and works fine in classic layouts. Did you change to simple layout or change to a multiple answers allowed question type?

@vgayraud , thanks for your prompt response. The chosen layout is flat currently. I made a copy of the survey and tried changing all layouts and still it doesn’t work.

And the option is only single value as shown below:

I tried contacting qualtrics via phone and they say they cannot support as it is code related. Not sure why.

@vgayraud , I tried creating a new survey with just a question and a text. And in question, I wrote this code. It doesn’t work in the new survey as well. Any clue ?

@Deepak  Hey thanks a ton. It works now. Only small problem is that when I select an option, the next button appears for a second and then goes to next page. In my earlier code, the button never appeared.

Anything can be done in this aspect ?

Maybe this?

Qualtrics.SurveyEngine.addOnReady(function() {

    /* Place your JavaScript here to run when the page is fully displayed */

this.hideNextButton();
var that = this;
document.querySelectorAll("input[type='radio']").forEach(function(radio) {
	radio.addEventListener("click", function() {
		that.clickNextButton();
	  });
	});	

});

Unfortunately Qualtrics doesn’t support any custom javascript - I just had to go through MANY forms to remove this feature so workgroups weren’t stalled.  I do wonder what made the auto-advance functionality suddenly stop working. Any insight there would be helpful (if anyone has access to some kind of oracle ;) )

Put it onload and try

I am having the same issue!!! This code worked yesterday and is not working today:
 

currentQuestion.questionclick = function(event, element) {

if (element.type === 'radio') {

...

}

};

I had this problem last month with the next button (I had to change it from the first to the two lines of code commented to the next two lines of uncommented code). It took me hours to figure out what went wrong.

//let nextbutton = document.getElementById("NextButton");

//nextbutton.onclick = function() {

Qualtrics.SurveyEngine.addOnPageSubmit(function(type) {

if (type === "next") {

...

}

});

I’ve been using some of this code for over THREE years and all of the sudden I think Qualtrics is pushing changes on the backend with their API without properly informing us. It is ridiculous. I feel for you as my study that I have been working on for years is supposed to go live next week. I hope we can get some help.

This is the full function where I use “currentQuestion.questionclick...“:

//added after R1_fmpl

currentQuestion.questionclick = function(event, element) {

console.log("currentQuestion.questionclick segment in add_button_events");

// Checking if the clicked element is a radio button

if (element.type === 'radio') {

console.log("Radio button clicked");

const id_num = element.id.split('~')[2]; // Extracting the numerical identifier from the ID

console.log("Radio button clicked: ID number", id_num);

// Call update_table to handle the click event

update_table(element.value, element.id, id_num);

// Check selections and manage next button

var result = checkSelectionsAndManageNextButton();

console.log("Selection check result:", result);

if (result) {

// ADDED

findSwitchPoint(qid);

let value_display;

if (iseffLeft()) {

value_display = 1;

} else {

value_display = 2;

}

display_bounds(qid, value_display);

//END of ADDED

}

}

};

}

My code “questionclick” code was defined in another function (which is why I used currentQuestion.questionclick instead of this.questionclick where const currentQuestion = this;),  and when I just moved it to be defined outside of it in addOnReady, it now works again. The code that was in the “Best answer” did not work for me.

I have also had problems with the next button appearing and disappearing but I decided to move on from trying to figure that one out. I also had text that was hidden in addonload and now that does not always work, so I moved it to addonready and am just accepting that it appears for a second when loading. I think Qualtrics is making changes on the backend.

Another way to set the visibility of elements is to use internal css styles. Click on the the question text of a survey question for which you want the NextButton to be invisible. Open the ‘HTML View’ pane (top-right corner of the question text window). Add the code below at the bottom of the new window.

<style>

#NextButton {visibility: hidden;}
</style>

Use the code provided by @Deepak , that is add it as custom JavaScript to the question.

    // Add a click event listener to radio buttons

    jQuery("input[type='radio']").on("click", function() {

        jQuery(".NextButton").click();

    });

For me this worked, and the NextButton stays invisible for that page.

Here is the reason the original code stopped working…

There has been a change that has impacted the questionclick function sometime in the last couple of days. I noticed it on an multiple choice question. When you click on a choice, the associated element is no longer the radio button or checkbox, it is the choice label or span within the label.

Evidently, it is browser specific (i.e., change impacted Chrome but not Firefox).

​@TomG  do you suppose this is due to the change to “simple” layout?  And is there a version of that code that references the label instead of the button/box? 

Also, thanks for the detective work!  :)

No, it is independent of Simple layout.  I’m not sure which code ‘that code’ refers to. 

My original code with the questionclick function now works again without modification. Perhaps it was a bug that Chrome or Qualtrics fixed.

I’m a little nervous to put it back in my projects (there are probably ten) in case it breaks again!  But good to know it works for now! 

I was thinking the same thing!

​@aunarang,

Here was my quick fix for a multiple choice question so I didn’t have the change anything else. I just added a couple of lines to the beginning of the questionclick function to switch to the correct element without impacting anything else.  (i.e., if the click is within a choice container and not a radio or checkbox element, it switches to the radio or checkbox element)

 qobj.questionclick = function(event,element) {
		if(element.type != "checkbox" && element.type != "radio") {
			var jqEl = jQuery(element).closest(".Selection").find("input[type=checkbox], input[type=radio]");
			if(jqEl.length>0) element = jqEl.get(0);
		}
...