Javascript or jQuery change event | XM Community
Skip to main content
Has anyone tried using a jQuery change event on a question? Here is what I have tried:





Qualtrics.SurveyEngine.addOnReady(function()

{

var that = this;

// change event on a dropdown list

jQuery( "select[name='QR\\~QID11']" ).change(function() _

// only advance if a response is selected

if (jQuery( "select[name='QR\\~QID11']" ).val() != '') _

alert("list option changed"); // testing how many times this change event is fired

that.clickNextButton(); // move to the next page

}

_);

_);



(I had to replace the { and } in the code above with _ otherwise I could not post the code here without a 'You don't have permission to access' error on this forum.)

Anyway, when I tried the code above it fires the change event multiple times when I select an option from a dropdown list. As a result my survey skips ahead more than one page. (when I look at the source code on the survey it seems the change event appears in three different places, but I have it only defined in one question)
You need to defer the next button click using setTimeout.
I gave up on testing the jQuery change event and tried something different. I thought I could work with the questionclick function but I noticed that the event fired as soon as you clicked on the dropdown box 'arrow' and fired a second time when a selection is clicked. However, you are able to distinguish between simply clicking on the drowdown box and making a selection through the element ID like so:



var that = this;

this.questionclick = function(event,element){

var elm = element.id;

// the dropdown ID is QR~QID11 and when you click on the dropdown box the element.id is equal to the dropdown ID, but each selection item has a separate element ID so if we exclude the clicking of the main dropdown component and only react to the selection of one of the response options, this functions as a change event when click on the dropdown

if (elm != 'QR\\~QID11' && elm != '') {

alert( elm);

that.clickNextButton();

}

}



So this seems to work for 'clicking' on a dropdown list but DOES NOT handle tabbing through questions and responses which would require a change event.



Probably the more versatile version is the following that does not hard-code the element ID:



var that = this;

this.questionclick = function(event,element){

var elm = element.id;

var elmId = element.id.split('~')[1]; // get question ID

var responseId = element.id.split('~')[2]; // get response ID

// we only care when a response is selected

if (responseId) {

that.clickNextButton();

}

}
> @TomG said: You need to defer the next button click using setTimeout.



Defer it to what? I can't tell how many times the change event will be fired, but I have seen in some cases up to 4 or 5 times.
If selectedIndex > 0 then click the next button with a timeout of 0 milliseconds (i.e. defer until the stack clears). I'd post the code, but I get an Access Denied error.
> @TomG said: I'd post the code, but I get an Access Denied error.



I believe if you simply replace the {} brackets with underscores then the you can post the code (it seems to only have a problem with the brackets).



Are you talking about using the setTimeout within the change event? If so I can't see how that would prevent the setTimeout function from being fired multiple times. I tried using the .off() method (which decreased the number of times the change event fired, but it still fired twice, which is one too many times).



var qid = this.questionId;

jQuery( "select[name='QR\\~"+qid+"']" ).off(); // called this statement from within the change event

Leave a Reply