Code Debugging: fakeNext button not engaging | XM Community
Skip to main content

I am going crazy trying to figure out why my code won’t work. I have created a fake next button in HTML and styled in through the Look and Feel CSS menu. It is appearing on my screen as expected but when I click it nothing happens.

 

<button id="fakeNext" > → </button>

 

This is the code I have associated with the fake button

Qualtrics.SurveyEngine.addOnReady(function()
{
	document.querySelector("#Buttons").insert(document.querySelector('#fakeNext'));
	this.hideNextButton();

	var $jq = jQuery.noConflict();
	//Place your JavaScript here to run when the page is fully displayed*/
	//define this
	var qobj = this;
	//get set to throw error messages on value
	var q = jQuery("#"+this.questionId);
	var ve = q.find(".ValidationError").first();

	jQuery('#fakeNext').click(function(){
		//pull in the values form the table and which options were selected in previous question
		var youthEng = qobj.getChoiceValue(1,1);
		var youthSpan = qobj.getChoiceValue(2,1);
		var youthHmg = qobj.getChoiceValue(3,1);
		var youthOth = qobj.getChoiceValue(4,1);
		var adultEng = qobj.getChoiceValue(1,2);
		var adultSpan = qobj.getChoiceValue(2,2);
		var adultHmg = qobj.getChoiceValue(3,2);
		var adultOth = qobj.getChoiceValue(4,2);
		var pq = '${q://QID5/SelectedChoicesRecode}';
		console.log(youthEng, youthSpan, youthHmg, youthOth, adultEng, adultSpan, adultHmg, adultOth, pq);

		ve.hide();
		//if youth is selected make sure at least one langauge has an entry greater than 1
		if( (pq.includes(2)) && (youthEng < 1 || youthEng == 'false') && (youthSpan < 1 || youthSpan =='false') && (youthHmg < 1 || youthHmg =='false') && (youthOth < 1 || youthOth =='false')) {
			document.body.scrollTop = document.documentElement.scrollTop = 0;
			ve.html("You must put a number in the youth column or change the previous page to show you do not have youth openings.");
			ve.show();
			return false;
		}
		//if adult is selected make sure at least one language has an entry greater than 1
		else if( (pq.includes(1)) && (adultEng < 1 || adultEng == 'false') && (adultSpan < 1 || adultSpan =='false') && (adultHmg < 1 || adultHmg =='false') && (adultOth < 1 || adultOth =='false')) {
			document.body.scrollTop = document.documentElement.scrollTop = 0;
			ve.html("You must put a number in the youth column or change the previous page to show you do not have youth openings.");
			ve.show();
			return false;
		}

		//if all is okay press the next button
		else{
			//press the next button
			jQuery('#NextButton').click();
		}
	});
});

What is driving me crazy is that everything is working just fine when I change the button reference in my click function to ‘#NextButton’ but with the existing code when I click the fakeNext button nothing happens. Any help is greatly appreciated! 

I’ve been doing some digging and playing around. The issue seems to be with the line of code that adds the button with the other buttons. If this button is just in the question text everything works great. When it gets put in the buttons container it becomes unclickable. Thoughts on why? 

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Place your JavaScript here to run when the page loads*/
	//document.querySelector("#Buttons").insert(document.querySelector('#fakeNext'));
	jQuery('#Buttons').append('<button id="fakeNext"> NewButton>></button>');
	this.hideNextButton();

});

I can use this exact code to insert the button in other questions and it works just fine in the button banner. I’ve tried copying my project and copying my question in case the original instance of the question was corrupted.

Leave a Reply


Terms & Conditions